Drawing Polygons on Canvas

13 Oct


Join Community:

Drag, Drop, Snap Blocks, Build app

Need to draw polygon with multiple sides on Canvas? Image below shows output of a simple app that was created in AppyBuilder. It includes a polygon that can be rotated, skewed, scaled and transitioned into multiple sides using Slider

AppyBuilder Designer components

Image below shows the components that were used in AppyBuilder. It includes 3 Sliders, 1 Canvas, and 2 ImageSprites

Blocks Editor (coding):

Canvas component, includes a block called DrawPolygon. Using this you can specify:

  • centerX: the polygon center X position
  • centerY: the polygon center Y position
  • numSides: Number of sides (e.g 3 for triangle)
  • polyRadis: The radius from poly center to sides
  • cornerRadius: the radius of vertex (if 0 means no curve)
  • rotation: how far it should skew (e.g. if 4 sides, specifying 45 will make it look like square and specifying 0 will make it look like diamond)
  • fill: boolean indication if it should fill color or not

When sliderScale Slider thumb-position is changed, its related event-handler PositionChanged will automatically get triggered.  Int his event-handler, we:

  • clear the previously drawn poly
  • find the center of our canvas for both x and y
  • Use 4 sides for square
  • Use the sliderScale thumbPosition to get its current value
  • Use a radius of 11 for cornes
  • use a rotation (skew of 12)
  • make it fillable for color

For rotation of the poly, we use same block, but this time, when sliderRotate thumb position changes, we use its thumb-position to change the rotation value:

For changing number of sides, we use sliderSides.PositionChanged to get its current thumb-position and change the value for numSides:



Join forum community for tutorials, discussions, technical questions


Share, Like us below 🙂


Leave a comment

Posted by on October 13, 2018 in Uncategorized


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: