(MAI) Drawing and the Canvas Lesson

Drawing and the Canvas

The App Inventor Canvas component is a two-dimensional, touch-sensitive rectangular grid that is a sub-panel of the screen. It is used for drawing and animation.

The Canvas uses a grid made up of pixels defined by an X-Y coordinate.

  • The top-left cell in a Canvas starts with 0 for both coordinates
  • If move right, the x coordinate increases
  • If move down, the y coordinate increases
  • The upper-right corner has an x coordinate equal to the width of the Canvas minus 1

image of canvas (similar to a graph) as y increases, x increases plot point (3, 3), phone screen indicated

Canvas Properties, Functions, and Events

  • Canvas properties: Width, Height, BackgroundColor, PaintColor
  • Canvas functions: DrawCircle, DrawLine
  • Canvas events: Touched(x,y), Dragged(startx,starty,previousx,previousy, currentx, currently)
  • note that dragged is triggered many times as user drags finger across the screen

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION