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”]
Index
- Tutorial
- Commands by element categories
- Standard Element Commands
- Audio element
- Button element
- Canvas element
- DropDown element
- EyeTracker element
- Function element
- Html element
- Image element
- Key element
- MediaRecorder element
- Scale element
- Selector element
- Text element
- TextInput element
- Timer element
- Tooltip element
- Var element
- Video element
- Youtube element
- Special clear command
- Special end command
- Global PennController Commands
- PennController
- PennController.AddHost
- PennController.AddTable
- PennController.CheckPreloaded
- PennController.Debug
- PennController.DownloadVoiceButton
- PennController.FeedItems
- PennController.Footer
- PennController.GetTable
- PennController.GetURLParameter
- PennController.Header
- PennController.InitiateRecorder
- PennController.PreloadZip
- PennController.ResetPrefix
- PennController.SendResults
- PennController.Sequence
- PennController.SetCounter
- PennController.Template
- Installing PennController
- Ontology
- Aesthetics
- Preloading resources
- ZIPped resources
- Spreadsheet (CSV)
- Canvas creation
- Setup for audio recordings collection