Games and Animations 2.1-1: Canvas

Canvas

This is the first part of the module for Lesson 2.1.

Canvas is a component found under the Basic blocks box. The canvas component is a two-dimensional touch-sensitive rectangular panel on which drawing can be done and sprites can be moved. The BackgroundColor , PaintColor , BackgroundImage , Width , and Height of the Canvas can be set in either the Designer or in the Blocks Editor. The Width and Height are measured in pixels and must be positive.

The important aspect about Canvas for gaming is that underlying the canvas screen is a coordinate system. Any location on the Canvas can be specified as a pair of (X, Y) values, where

• X is the number of pixels away from the left edge of the Canvas
• Y is the number of pixels away from the top edge of the Canvas

The upper left corner of the Canvas coordinate system is (0,0). Look at the image below to see an example Canvas with coordinates on it.

There are events to tell when and where a Canvas has been touched or a Sprite ( ImageSprite or Ball ) has been dragged. There are also methods for drawing points, lines, and circles.

For more practice using the Canvas component and learning about how to use the coordinate system, download the CoordXplore app using the link below. Once you have the app on your phone, try touching the screen at different points, you should see the Pixel (x,y) in the lower left corner change values. This is because you are changing the position of your touch on the Canvas coordinate system. Then take a look at the zip file and how the circles and lines are drawn using the coordinate file. The zip file and apk are available from the App Exploration link below.

App Exploration: CoordXplore
Download the CoordXplore app and play around with it to get familiar with the x,y values of the canvas.

>> Go to the next section for this module

<< Return to the main page for Lesson 2.1