Make Shapes On Canvas

How can I make so many shapes, so many types of lines on canvas at anywhere on the canvas?

1 Like

and advice in the articles Search results for 'canvas dra' - MIT App Inventor Community

and using the drawing tools in Canvas

1 Like

Okay but I cannot be able to extend the width of the polygon and also I cannot be able to make the polygons at anywhere on the whole canvas in the above project.

1 Like

Experiment with drawing tools in Canvas and take the time to read the articles.

1 Like

Thanks for your time and help.

You can also use SVG graphics in a WebView for this, depending on your Android version:
SVG Demo viewbox webviewer_SVG.aia (3.7 KB)


1 Like

I am now also confused in making shapes. So, please help me.

The polygon.aia project just draws regular polygons.

This is a powerful block for shapes:
blocks (2)
It is fast, so you can modify your list of points as you drag Balls around the Canvas, and erase and redraw the shape(s) on the Canvas when you TouchUp.

Play with it.

1 Like

How can I find the point list of triangle, square, rectangle, etc?

You set the points based upon the size of your canvas, and where you want to position your shape. This becomes more complicated if your canvas is sized dynamically to the device....

e.g. to draw a square of 100 x 100 pixels in the middle of a canvas sized 200 x 200 pixels, your point list would be:

1 Like

If I want to make the square at any place on the canvas, then how can I make the point list?

See my previous example, you should be able to figure this out for yourself...

(hint: the first x,y is [50,50] which is the top left corner of the square, 50 pixels in from the left, and 50 pixels down from the top of the canvas)

1 Like

@ABG can you please tell me how did you code that different kind of mouse pointer

I hadn't noticed that before.

Apparently, it must come from my copy of the MemuPlay Android emulator, since it only appears when my cursor crosses that emulator window.


Thank You for your reply :slightly_smiling_face:

How to make proper and straight (not in diagonal) square and rectangle using this code?

One way

Please experiment @Sarthak ; only you know what you want to do and expect to happen.

DrawShape( pointList , fill ) draws a shape on the canvas. pointList should be a list contains sub-lists with two number which represents a coordinate. The first point and last point does not need to be the same. e.g. ((x1 y1) (x2 y2) (x3 y3)) When fill is true, the shape will be filled.

1 Like

I need help for drawing Star can somone help me for my school project

You would use the DrawShape block. You should be able to work up a pointslist for a star, even if you use paper and pencil. Set your canvas to fixed dimensions.

1 Like

How many points in the star?

Pick the px,py for the center of the star, and the radius of the star.

The points of the star are located by imagining a line from the center, rotating at degrees = 360/points around the center to get to each point.

Here is sample code for a triangle from one of my projects ...

1 Like