Canvas: Finger painting on the canvas

[Scott Ferguson]

About: The Canvas component is a powerful feature which allows drawing, typing text and animation with image sprites and balls that bounce.

In this exercise we will place a Canvas component in the layout then tell it to trace along as we drag a finger on the device screen or drag a mouse pointer on the emulator screen.

Create a new project titled lrn_canvas_fingerpaint.

Screen Designer:

Click on the Title bar then under the Properties panel:

Uncheck Scrollable

Change the Title to Finger Paint

Drag a Canvas component from the Basic section of the Palette panel to the layout

Under the Properties panel set Width and Height to Fill Panel.

Blocks Editor:

From the My Blocks tab, Canvas1 option drag out a Canvas1.Dragged event block.

 - notice that the sockets fill with name blocks automatically. These names can be changed, but we will leave them with the default names.

 - this block is used to execute any blocks it contains if the app user drags a finger across the screen.

 - it also remembers where the finger was before and after it moved.

From the My Blocks tab, Canvas1 option drag out a Canvas1.DrawLine procedure block and drop it inside Canvas1.Dragged

Open My Blocks, My Definitions and drag out prevX and attach it the x1 socket of Canvas1.Drawline.

Repeat this for prevY to y1, currentX to x2, currentY to y2.

 - the Drawline block will remember the last position of your finger or mouse and the current position and draw a line between those two points

Now test your project with the emulator or your connected device. You should see something like this when you drag your finger or mouse pointer:

END.

Challenge: Try changing the LineWidth or PaintColor for your app. Can you add a button to change 1 of the settings?