New online demos available.  

Command: initial

Initializes the Canvas widget. You should 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.

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.

Both these parameters are passed directly to the CustomersCanvas.IframeApi.loadEditor() method, 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

{  
    "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"
                    }
                }
            }
        }
    }
}