Command: initial
================

Initializes the [Canvas widget](../canvas.md). You must always specify this command when using the Canvas.

_**Important:** It is highly discouraged to make this command dynamic (as it will cause a "hard reload" of the product in the editor)._

If you are familiar with Customer's Canvas IFrame API, it is very similar to the [CustomersCanvas.IframeApi.loadEditor() method](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.loadeditor.htm). 

## Params

- `productDefinition` - a list of pages (surfaces) and PSD/IDML templates to open.
- `editorConfig` - the configuration of the editor as explained in [Customer's Canvas documentation](https://customerscanvas.com/docs/cc/client-config.htm).

Both these parameters are passed directly to the [CustomersCanvas.IframeApi.loadEditor() method](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.loadeditor.htm), so refer the Customer's Canvas documentation for more details.

Also, it supports an aditional settings unavailable through the `editorConfig`: 

- `viewerSettings`
   - `zoomMode` - auto-zoom mode. Possible values are: `none`, `bestFit`, `bestFitShrinkOnly`, `fitToWidth`, `fitToHeight`, `zoomControl`, `fitToWidthShrinkOnly`, `fitToHeightShrinkOnly`
   - `zoom` - zoom level as a number (1 = 100%)
   - `scrollPosition` - scroll position as a object like `{x: number, y: number}`

## Example

``` json
{  
    "name":"editor",
    "type":"canvas",
    "params":{  
        "initial":{  
            "productDefinition":{  
                "surfaces":[  
                    {  
                        "printAreas":[  
                            {  
                                "designFile":"mytemplate"
                            }
                        ]
                    }
                ]
            },
            "editorConfig":{  
                "canvas":{  
                    "containerColor":"#fff",
                    "color":"#fff",
                    "shadowEnabled":true,
                    "rulers":{  
                        "enabled":false
                    }
                },
                "fontList":{  
                    "appFonts":[  
                        "*"
                    ]
                },
                "initialMode":"SimpleOnly",
                "restoreProductOnReloadEnabled":false,
                "widgets":{  
                    "ObjectInspector":{  
                        "isHidden":false,
                        "position":"Right",
                        "bgItemEnabled":false,
                        "variableItemsEnabled":false
                    },
                    "FinishButton":{  
                        "mode":"Disabled"
                    }
                }
            }
        }
    }
}
```