How to Draw Slices Dynamically and Label it using Canvas plugin?


Attached Files

The following files have been attached to this tutorial:



1,404 visits, 2,136 views


This tutorial hasn't been translated.


I recently had to implement a similar type of dynamic graphic in canvas for a project I’m working on, so I thought I’d turn it into a tutorial on how to make a dynamic wheel and insert labels.

In this example, we will make a wheel with 6 slices and insert labels to it. I shall be using draw html5 canvas on construct 2 using canvas plugin. (you can later modify it and take to any level and any number of slices)

Demo Here


Bring canvas on your layout and give it behavior rotation, set speed = 100.


Write following Global variables, RADIUS, cx,cy to define the parameters of wheel with cx, cy being the center of the arc.

The html5 function being translated is “ctx.arc(x,y,radius,startAngle,endAngle, clockwise);”

This will be outer circle of radius 5 px more with black stroke of width 20. The output will be as in fig. 1.

Next, we draw inner circle with following parameters.

The output will be as in fig. 2.


  • Order by
Want to leave a comment? Login or Register an account!