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



Attached Files

The following files have been attached to this tutorial:



2,950 visits, 4,534 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

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!