Drawing Shapes On Canvas

Published on February 11, 2022

Introduction

You can do a lot of things with the Canvas component in App Inventor. Although there are built-in blocks for shapes like circle, lines, arc, there aren't many simple functions. That's why in this guide, you will learn how to draw rectangles, isoceles triangles and stars with App Inventor with the DrawShape method.

🏷️ Tags: #tutorials-and-guides, #canvas

The DrawShape method draws a shape for you. You can set fill to true if you want the shape to be filled with the paint color.

The socket pointList accepts a list with sublists about the co-ordinates of the vertices of the shape. For example, if your list is [[x1,y1],[x2,y2],[x3,y3]], it will draw points (x1,y1) and (x2,y2) and (x3,y3), then join the three vertices with segments. The pointList socket is very strict and only accepts this format. If the system fails to understand your input, an error will occur.

Do remember that you must have at least 3 vertices, but you can have as many vertices as you want. Below is a format that the canvas can draw. There are 3 sub-lists, so it is a triangle.

A. Rectangles

Before we start programming, it is important to know the co-ordinates of the vertices of this diagram. A vertex is a point on the shape where 2 or more lines intersect.

As you can see, the co-ordinates of the vertices are labeled. The units for all of the co-ordinates are pixels. The vertex on the top left corner has a pair of co-ordinates of (20, 20). This is because we want 20 pixels for both the height and the width empty for the margin. Then, we go right, to another vertex of (W - 20, 20). W is the width of the canvas, and we also want a 20-pixel margin at the right side. The Y is 20, because we want a straight segment, not a diagonal one. Notice that the X co-ordinate of the two vertices changed, but the Y co-ordinate did not.

Next, we go further down to the point in the bottom right corner, with a pair of (W - 20, H - 20). H represents the Height of the canvas. Notice that the X of the previous vertex and this vertex are the same, but the Y co-ordinates aren't. This is because we still want a 20 pixel margin at the bottom. Finally, we have the last point at the left, with co-ordinates of (20, H - 20). Notice that the Y this time is unchanged, but the X changed to match the vertex on the top.

Remember that App Inventor has built-in blocks for the height and the width in pixels.

Also, since we are drawing a shape, the order should be right-down-left-up. Do not mess orders up.

Together with App Inventor blocks, you can use these. Be careful with the structure of lists and the sub-lists. In the emulator demo, the height of the canvas is 350 pixels, while the width is fill parent.

You can always fill the rectangle by setting 'fill' to true.

B. Isoceles Triangles

Isoceles triangles come in different shape and different patterns, but in this tutorial, we are going to do the one pictured in this diagram.

The vertices at the bottom are similar to the rectangle, but the top is different. The X co-ordinate of the top segment is W ÷ 2 because it must be in a middle. The equal sides of the triangle are the left and the right sides. The drawing order is down-right, left, then up-right.

Together with App Inventor blocks, this is what you will get. The height of the canvas is 200 pixels, and the width is fill parent.

You can always fill the triangle by setting 'fill' to true.

D. Conclusion

And there you have it. These are only 3 of the shapes you can draw with the Canvas component. When you want to draw a shape:

  • Draw the shape on a piece of paper.

  • Label all of the co-ordinates of each point.

  • Program it!