The Canvas component is a two-dimensional, touch-sensitive rectangular grid. It's like a piece of paper in the app that can be drawn on. You can also place images on it and animate those images.

You draw and place objects in a Canvas using an X-Y grid that is similar to the one used in Math. The Canvas is made up of pixels--the tiniest dots of color that can appear on a screen. Each pixel’s location is defined by an X-Y coordinate. X defines a location on the horizontal plane (starting at 1 on the far left and increasing as you move to the right across the screen), and Y defines a location on the vertical plane (starting at 0 at the top and increasing as you move down the screen).

The top-left cell in a Canvas starts with 1 for X and 0 for Y(X=1,Y=0). As you move right, the X coordinate increases; as you move down, the Y coordinate increases. The upper-right corner has an X coordinate equal to the width of the Canvas. The App Inventor canvas coordinate system is different than the traditional cooridinate system, as you can see the figure below.

Click on the photo below to play around with the different spots on a traditional coordinate plane.

source:http://www.mathopenref.com/coordplane.html

Adding a Canvas to your App

You'll find the Canvas component in the "Drawing and Animation" drawer of the designer. When you drag a Canvas component onto the screen, it starts out really small because its current Width and Height properties are set to automatic.

Automatic means that the size of the Canvas will change in regards to what is inside the canvas component. Since nothing is in it to start, it appears small. Typically you'll change the width of the Canvas to "Fill parent", which will make it span the entire width of the screen.) You'll change its Height to around 300 or another static value that determines how much of the screen real estate will be allocated to the Canvas.