Canvas

The Canvas component is a container for drawing graphics, and manipulating images via JavaScript. Once the component is on the page, use JavaScript to create content within the canvas.

More information can be found on the Umajin Developer site: Canvas Component

Properties for the Canvas Component

Name

When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.

Position and Size

Sets position and size.

As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations.

You can use millimeters to control aspects of size like width or height in order to create a Canvas component that’s size will be maintained across devices.

Appearance

Image	An image loaded onto the canvas (optional)
Fill color	Type in the hex number or use the color panel to select the color you want.
Opacity	The opacity slider sets the transparency of the canvas. 100 is maximum opacity.
Pixel width	Width of the image buffer.
Pixel height	Height of the image buffer.
Resize Mode	Stretch (default) – stretches the canvas to the size of the component on the page. Fit – fits the canvas, with the aspect ratio from Pixel width and Pixel Height, into the available space within the component on the page.

Events that can Trigger an Action on the Canvas Component

On Up

On Press

On Down

On Move