Program the App Behaviour

Code the app to draw a line when you move your finger across the screen.

Step 1

Go to the Blocks editor.

From the Blocks palette, click the Canvas1 drawer to open it. Drag and drop the yellow when Canvas1.Dragged event handler block onto the Viewer. 

Step 2

In the Canvas1 drawer, pull out the purple call Canvas1.DrawLine command block and snap it to the “do” section of the when Canvas1.Dragged block.

Step 3

The Canvas.Dragged event will start when the user’s finger moves across the screen in any direction. Program it to draw a line from where their finger was, to where it goes. The line will go from (x1, y1) to (x2, y2).

To do this, use a new type of block: the orange variable block. Variable blocks are like containers where we can keep something we want to use later, like numbers and text; they store information.

Hover the mouse over the variables of the when Canvas1.Dragged block. Pull out the get prev and get current blocks. Plug the get prev blocks into x1 and y1, and the get current blocks into x2 and y2.

Step 4

Test it out! Go to your phone and drag your finger around the screen. Well done! The simple Doodle app is complete!