Canvas Component

Properties

backgroundColor
  Specifies the Canvas's background color as an red-green-blue-alpha RRGGBBAA or red-green-blue RRGGBB string, i.e., 0xAARRGGBB. An alpha of 00 indicates fully transparent and FF means opaque. The background color only shows if there is no background image.
Data type: color
Designer Writable true <canvas name="canvasName" backgroundColor="FF3304fc">
Code Writeable true canvasName.backgroundColor = "FF3304fc"
Code Readable true let variable = canvasName.backgroundColor

backgroundImage
  Specifies the name of a file containing the background image for the Canvas.
Data type: string
Designer Writable true <canvas name="canvasName" backgroundImage="cat.png">
Code Writeable true canvasName.backgroundImage = "cat.png"
Code Readable true let variable = canvasName.backgroundImage

backgroundImageinBase64
  Set the background image in Base64 format. This requires API level >= 8. For devices with API level less than 8, setting this will end up with an empty background.
Data type: string
Designer Writable false
Code Writeable true canvasName.backgroundImageinBase64 = "Test backgroundImageinBase64"
Code Readable false

extendMovesOutsideCanvas
  Determines whether moves can extend beyond the canvas borders. Default is false. This should normally be false, and the property is provided for backwards compatibility.
Data type: boolean
Designer Writable true <canvas name="canvasName" extendMovesOutsideCanvas="true">
Code Writeable true canvasName.extendMovesOutsideCanvas = true
Code Readable true let variable = canvasName.extendMovesOutsideCanvas

fontSize
  Specifies the font size of text drawn on the Canvas.
Data type: number
Designer Writable true <canvas name="canvasName" fontSize="24">
Code Writeable true canvasName.fontSize = 24
Code Readable true let variable = canvasName.fontSize

height
  Specifies the Canvas's vertical height, measured in pixels.
Data type: number
Designer Writable true <canvas name="canvasName" height="400">
Code Writeable true canvasName.height = 400
Code Readable true let variable = canvasName.height

heightPercent
  Specifies the Canvas's vertical height as a percentage of the Screen's Height.
Data type: number
Designer Writable false
Code Writeable true canvasName.heightPercent = 65
Code Readable false

lineWidth
  Specifies the width of lines drawn on the Canvas.
Data type: number
Designer Writable true <canvas name="canvasName" lineWidth="2">
Code Writeable true canvasName.lineWidth = 2
Code Readable true let variable = canvasName.lineWidth

paintColor
  Specifies the paint color as an red-green-blue-alpha RRGGBBAA or red-green-blue RRGGBB string, i.e., 0xAARRGGBB. An alpha of 00 indicates fully transparent and FF means opaque.
Data type: color
Designer Writable true <canvas name="canvasName" paintColor="FF8c2d8c">
Code Writeable true canvasName.paintColor = "FF8c2d8c"
Code Readable true let variable = canvasName.paintColor

tapThreshold
  Specifies the movement threshold to differentiate a drag from a tap.
Data type: number
Designer Writable true <canvas name="canvasName" tapThreshold="5">
Code Writeable true canvasName.tapThreshold = 5
Code Readable true let variable = canvasName.tapThreshold

textAlignment
  Specifies the alignment of the canvas’s text: center, normal (starting at the specified point in DrawText or DrawTextAtAngle), or opposite (ending at the specified point in DrawText or DrawTextAtAngle).
Data type: string
Designer Writable true <canvas name="canvasName" textAlignment="center">
Code Writeable true canvasName.textAlignment = "center"
Code Readable true let variable = canvasName.textAlignment

visible
  Specifies whether the Canvas should be visible on the screen. Value is true{
Data type: boolean
Designer Writable true <canvas name="canvasName" visible="true">
Code Writeable true canvasName.visible = true
Code Readable true let variable = canvasName.visible

width
  Specifies the horizontal width of the Canvas, measured in pixels.
Data type: number
Designer Writable true <canvas name="canvasName" width="500">
Code Writeable true canvasName.width = 500
Code Readable true let variable = canvasName.width

widthPercent
  Specifies the horizontal width of the Canvas as a percentage of the Screen's Width.
Data type: number
Designer Writable false
Code Writeable true canvasName.widthPercent = 100
Code Readable false

class
  The styling class of the the component
Data type: string
Designer Writable true <canvas name="canvasName" class="Test class">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <canvas name="canvasName" id="Test id">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <canvas name="canvasName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
clear Clears the canvas, without removing the background image, if one was provided.
canvasName.clear()
drawArc Draw an arc on Canvas, by drawing an arc from a specified oval (specified by left, top, right & bottom). Start angle is 0 when heading to the right, and increase when rotate clockwise. When useCenter is true, a sector will be drawed instead of an arc. When fill is true, a filled arc (or sector) will be drawed instead of just an outline.
canvasName.drawArc(left, top, right, bottom, startAngle, sweepAngle, useCenter, fill)
canvasName.drawArc(0, 300, 0, 300, 0, 90, true, true)
left number
top number
right number
bottom number
startAngle number
sweepAngle number
useCenter boolean
fill boolean
drawCircle Draws a circle (filled in) with the given radius centered at the given coordinates on the Canvas.
canvasName.drawCircle(centerX, centerY, radius, fill)
canvasName.drawCircle(150, 150, 40, true)
centerX number
centerY number
radius number
fill boolean
drawLine Draws a line between the given coordinates on the canvas.
canvasName.drawLine(x1, y1, x2, y2)
canvasName.drawLine(0, 0, 300, 300)
x1 number
y1 number
x2 number
y2 number
drawPoint Draws a point at the given coordinates on the canvas.
canvasName.drawPoint(x, y)
canvasName.drawPoint(300, 0)
x number
y number
drawShape Draws a shape on the canvas. pointList should be a list contains sub-lists with two number which represents a coordinate. The first point and last point does not need to be the same. e.g. ((x1 y1) (x2 y2) (x3 y3)) When fill is true, the shape will be filled.
canvasName.drawShape(pointList, fill)
canvasName.drawShape(1,1,50,50,200,0, true)
pointList list
fill boolean
drawText Draws the specified text relative to the specified coordinates using the values of the FontSize and TextAlignment properties.
canvasName.drawText(text, x, y)
canvasName.drawText("Test text", 50, 50)
text string
x number
y number
drawTextAtAngle Draws the specified text starting at the specified coordinates at the specified angle using the values of the FontSize and TextAlignment properties.
canvasName.drawTextAtAngle(text, x, y, angle)
canvasName.drawTextAtAngle("Test text", 0, 0, 90)
text string
x number
y number
angle number
getBackgroundPixelColor Gets the color of the given pixel, ignoring sprites.
canvasName.getBackgroundPixelColor(x, y)
canvasName.getBackgroundPixelColor(30, 40)
x number
y number
getPixelColor Gets the color of the given pixel, including sprites.
canvasName.getPixelColor(x, y)
canvasName.getPixelColor(40, 50)
x number
y number
save Saves a picture of this Canvas to the device's external storage. If an error occurs, the Screen's ErrorOccurred event will be called.
canvasName.save()
saveAs Saves a picture of this Canvas to the device's external storage in the file named fileName. fileName must end with one of ".jpg", ".jpeg", or ".png" (which determines the file type: JPEG, or PNG).
canvasName.saveAs(fileName)
canvasName.saveAs("Test fileName")
fileName string
setBackgroundPixelColor Sets the color of the given pixel. This has no effect if the coordinates are out of bounds. The color is a single integer representation of a color. It needs to be created using one of the color.create methods.
canvasName.setBackgroundPixelColor(x, y, color)
canvasName.setBackgroundPixelColor(0, 0, "FFd815f6")
x number
y number
color color
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
dragged When the user does a drag from one point (prevX, prevY) to another (x, y). The pair (startX, startY) indicates where the user first touched the screen, and "draggedAnySprite" indicates whether a sprite is being dragged.
canvasName.addEventListener(
    "dragged",
    function (startX, startY, prevX, prevY, currentX, currentY, draggedAnySprite) {
        //Your code here
    }
)
startX number
startY number
prevX number
prevY number
currentX number
currentY number
draggedAnySprite boolean
flung When a fling gesture (quick swipe) is made on the canvas: provides the (x,y) position of the start of the fling, relative to the upper left of the canvas. Also provides the speed (pixels per millisecond) and heading (0-360 degrees) of the fling, as well as the x velocity and y velocity components of the fling's vector. The value "flungSprite" is true if a sprite was located near the the starting point of the fling gesture.
canvasName.addEventListener(
    "flung",
    function (x, y, speed, heading, xvel, yvel, flungSprite) {
        //Your code here
    }
)
x number
y number
speed number
heading number
xvel number
yvel number
flungSprite boolean
touchDown When the user begins touching the canvas (places finger on canvas and leaves it there): provides the (x,y) position of the touch, relative to the upper left of the canvas
canvasName.addEventListener(
    "touchDown",
    function (x, y) {
        //Your code here
    }
)
x number
y number
touchUp When the user stops touching the canvas (lifts finger after a TouchDown event): provides the (x,y) position of the touch, relative to the upper left of the canvas
canvasName.addEventListener(
    "touchUp",
    function (x, y) {
        //Your code here
    }
)
x number
y number
touched When the user touches the canvas and then immediately lifts finger: provides the (x,y) position of the touch, relative to the upper left of the canvas. TouchedAnySprite is true if the same touch also touched a sprite, and false otherwise.
canvasName.addEventListener(
    "touched",
    function (x, y, touchedAnySprite) {
        //Your code here
    }
)
x number
y number
touchedAnySprite boolean