Canvas -- a sub-panel of the screen
- The app or a user can draw in it
- The app can animate objects within it
Canvas has an X,Y coordinate system
- X represents the horizontal location of an object. The left-side of the Canvas is X=1. If the Canvas has a width of 300, then the right-side of the Canvas is X=300.
- Y represents the vertical location of an object. The top of the Canvas is Y=1. If the Canvas has a height of 400, then the bottom of the Canvas is Y=400. Note that Y gets bigger as you go down, which is the opposite of the traditional math coordinate system.
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, currenty)
- note that dragged is triggered many times as user drags finger across the screen
Instructor Demo
Demonstrate the following or give some or all of them to your students as challenges:
- Drag in a Canvas and set the width of the canvas to "Fill parent" and the height to 400
- Add a button below the Canvas.
- On the Button click, draw a circle at 30,30 no matter where touched
- On Canvas.Touched event, draw a circle at x,y
- Note that event parameters are found in "My Blocks": do not drag from event-handler
- On Canvas.Touched event, show x,y coordinates in a label.
- Draw a circle in middle of canvas no matter where touched
