Reference

Canvas

var canvas = Cx.Canvas({ renderTo: domId });

Properties

Properties	Type	Def	Definition
`zoom`	Number	`1`	View port transform zoom
`center`	Point	`(0,0)`	View port transform center
`wireframe`	Boolean	`false`	Show outline structure of figures
`document`	Document	Empty	Document shown in the Canvas
`selectedFigures`	Figures	`[]`	Current selection
`background`	Document	Empty	Decoration background for the Canvas
`backgroundColor`	Color	White	Background color, use null for transparency
`maskColor`	Color	Gray	Mask color when using MaskPen outlines
`maskAlpha`	Number	`0.8`	Mask alpha
`locked`	Boolean	`false`	If true, tools and actions are not allowed to modify the document
`showLoadingAnimation`	Boolean	`true`	Show loading feedback while waiting for the server
`toolbar`	Toolbar	`null`	HUD Toolbar definition
`hudClipboard`	Boolean	`false`	Show Clipboard button on the HUD
`autoSelection`	Boolean	`true`	Newly added figures are auto selected

Events

Events	Definition
`'ready'`	Canvas is ready
`'resize'`	Canvas size changed
`'zoomupdated'`	zoom or center updated

Viewport management

canvas.zoomTo(zoom,center);
canvas.zoomBy(delta); // zoom += delta
canvas.zoomIn(factor);  // zoom *= factor
canvas.zoomOut(factor); // zoom /= factor
canvas.zoomAround(bounds,margin);
canvas.zoomToFit$(figures,margin);
canvas.zoomToFitPages$(margin);
canvas.center(bounds);
canvas.center$(figures);
canvas.bounds();

Tools

canvas.tool(); // return current tool
canvas.tool(tool); // stack a new tool
canvas.popTool(); // commit current tool

Document forwarding interface

To make it easier to work with the canvas document, the following forwarding functions are provided:

canvas.pages(i,a);
canvas.activeLayerFigures(i,a);
canvas.activePageFigures(i,a);
canvas.layers(i,a);
canvas.figures(i,a);
canvas.allFigures();
canvas.commit$();
canvas.revert$();
canvas.update$();
canvas.add(figures);
canvas.remove(figures);
canvas.replace(old,new);
  
canvas.backOne(figures);
canvas.toBack(figures);
canvas.forwardOne(figures);
canvas.toFront(figures);
canvas.saveCopy$(attrs);
canvas.save$(attrs);
canvas.addClipart$(clipart);
canvas.replaceClipart$(old,clipart);
canvas.autoCreateMultiPartText$(figures);
canvas.breakMultiPartText(text);
  
canvas.group(figures);
canvas.ungroup(figures);
canvas.extractPowerClipContents(figure);
canvas.addPowerClipContents(figure,content);
  
canvas.reshape$(figures,action);

Selection helpers

canvas.selectAll();      // Shortcut for canvas.selectedFigures( doc.activeLayerFigures() )
canvas.clearSelection(); // Shortcut for canvas.selectedFigures().clear()
canvas.selectNext();     // Select next figure in z-order
canvas.keepSelection();  // Auto selection will not kick in for current transaction

Misc

// Returns a copy of the current zoom, offset, wireframe that can be stored to set back later
var s = canvas.state();
// Later...
canvas.state(s);

canvas.fill(context);
canvas.updateSize();
canvas.dispose();

canvas.render$();
canvas.contextFigures(i,a); // selection ? selectedFigures(i,a)
                            //           : doc.figures(i,a)
canvas.action(id,config);
canvas.showPagesSelector$();
canvas.figureAtPoint( docPoint );

Tools aware history

if( canvas.canUndo() ) canvas.undo();
if( canvas.canRedo() ) canvas.redo();

Figure Annotations

canvas.annotate( figure, { message: 'Message', pen: ... } );
canvas.annotate( figures, { grouped: true, message: ... } );
canvas.annotate( function(figure){ }, { message: function(figure){}, ... });
canvas.annotate( function(figure){ }, function(figure){} );
canvas.annotate( function(figure){ }, function(figure){} );
canvas.unannotate( annotation );
canvas.clearAnnotations();

Conditions

Canvas conditions are part of the figures conditions API. Read the Conditions tutorial for more information.

canvas.condition(name,function(figure){ return boolean; });
canvas.arrayCondition(name,function(figures){ return boolean; });

canvas.is(figure,condition...);
canvas.is$(figure,conditions...);

canvas.are(figures,conditions...);
canvas.are$(figures,conditions...);

canvas.only(figures,conditions...);
canvas.only$(figures,conditions...);

canvas.saveConditions();
canvas.restoreConditions();

Canvas background

The canvas background is used to show decorations or app specific guides.

var backgrondDocument = canvas.background();
// ... modify and commit$ like a normal document

The background document is independent from the document the Canvas is displaying. You can have a document (the design you will transfer to a shirt) and display it with different kind of backgrounds: a realistic t-shirt for a final preview, a simplified version that is just a bounding box to aid in edition mode, etc.

If you want a background that will be persisted with the document, then use a background layer in your documents. The Canvas background is only for the apps to be able to add things like a page box for reference.