Canvas elements let you create surfaces of a size you specify onto which you can place elements at specific coordinates.

Creation:

newCanvas("myCanvas", 100, 100)

Example:

[js try=”true”]newCanvas(“shapes”, 800, 400)
.settings.add( 0, 0, newImage(“square”, “square.png”) )
.settings.add( 400, 0, newImage(“triangle”, “triangle.png”) )
.print()
[/js]

The code above adds a <div> of size 800x400px to the page and places the image square.png at its top-left corner, and the image triangle.png to the right of square.png (assuming the images have a size of 400x400px).

To update the position of an element that is already on the surface, simply call .settings.add again on the Canvas element, and pass new coordinates.

You can use the graphic interface linked on this page to help you visualize your canvas and generate PennController-friendly code.

Commands

[yadawiki-list category=”NonTest command,Canvas element”]

Tests

[yadawiki-list category=”Test command,Canvas element”]