The new PCIbex Farm is here! Be sure to check out all of its new features and changes.

Link Search Menu Expand Document

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)

  • Use the CanvasCreation tool to help visualize Canvas layouts and generate code that can be added directly to a PennController script.

since

beta 0.3

example(s)

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