Canvas element

Test commands

    description

    Creates a rectangular surface that other elements can be placed onto.

    syntax

    newCanvas(ELEMENT_NAME: string, WIDTH: int, HEIGHT: int)
    • ELEMENT_NAME: The name of the newly-created element.
    • WIDTH : The width of the Canvas, in pixels.
    • HEIGHT : The height of the Canvas, in pixels.

    note(s)

    since

    beta 0.3

    example(s)

    + Use the [CanvasCreation tool](http://files.lab.florianschwarz.net/ibexfiles/CanvasCreation/){:target="_blank"} to help visualize `Canvas` layouts and generate code that can be added directly to a PennController script. ```javascript newImage("square", "square.png") .size(400, 400) , newImage("triangle", "triangle.png") .size(400, 400) , newCanvas("shapes", 800, 400) .add( 0, 0, getImage("square")) .add( 400, 0, getImage("triangle")) .print() ``` > 1. Creates a 800x400px `Canvas`. > 2. Places the `Image` `"square"` at the (x=0, y=0) coordinate and the `Image` `"triangle"` at the (x=400, y=0) coordinate.

    Action commands

    canvas.add

    syntax

    .add()

    description

    Places element onto the canvas at the coordinates (x, y).

    example

    click to expand 
    
@newImage("square", "square.png")
@    .size(50, 50)
@,
@newCanvas("shape", 200, 200)
@    .center()
$    .add( 0, 0, newText("description","This is a square") )
$    .add( "center at 50%", "middle at 50%", getImage("square") )
@    .print()
    • Adds a <div> surface of size 200x200px to the horizontal center of the page and places a description This is a square at its top-left corner and a 50x50px image of square.png centered horizontally and vertically onto the surface.
    ↑ back to top

    canvas.color

    syntax

    .color()

    description

    Changes the color of the canvas background.

    example

    click to expand
    • Note This doesn’t affect the aspect of the elements contained in the Canvas element
    
@ newCanvas(500,500)
@       .add(0,0,newCanvas(100,100).color("purple"))
@       .add(0,100,newText("some text"))
@       .color("orange")
@       .print()
    • Adds a <div> surface of size 500x500px and colors it in orange. Furthermore, text is placed at the coordinates (0,100) at the surface of canvas, and the new shape (square) in the form of canvas is placed onto it and colored purple.
    ↑ back to top

    canvas.log

    syntax

    .log()

    description

    Logs the time when the canvas is printed on the page.

    example

    click to expand 
    
@newImage("square", "square.png")
@    .size(50, 50)
@,
@newCanvas("shape", 200, 200)
@    .center()
@    .add( 0, 0, newText("description","This is a square") )
@    .print()
$    .log()
    ↑ back to top

    Test commands

    Table of contents