A recent project of mine involved creating a ‘Visual wheel’ where the users can select options by clicking on each sector of the wheel. When clicked, the user’s selection was to be stored in the backend, which in our case was obviously Salesforce.com. But the reason to create the wheel dynamically was that the data displayed in the band was to also come from Salesforce.
For drawing the five concentric circles we defined a function called “band” and passed it the following parameters which were required to draw the circles:
- The first parameter is “center” which is the center point of the circle to be drawn.
- Second is the “min-radius” which selects the minimum radius of the circle.
- Third is the “max-radius” which selects the maximum radius of the circle.
- And lastly I have used “bandNo” which defines the number of concentric circles we are going to draw.
The next step is to divide each part of the circle into five separate section. For this I have defined a function called “arc” which takes the start angle and the stop angle for the arc as parameters along with the “band” and “text” parameter.
The band with distinct sections is given in the screenshot attached below:
When mouse is hovered on a specific section it gets highlighted. As you can see for the section “Being healthy and safe” the 3rd point is highlighted in the screenshot.
The code for the entire solution is given here:
Let’s go through the code in detail:
There are three main classes that play an important role in creating the canvas:
This object stores the centre point of the circle.
This object is responsible to draw the concentric circles around the object Point.
This object is initialize with a constructor the parameters of which are listed below.
i) Point – object which contains the centre coordinates.
ii) minRadius – this defines the distance of the inner circle from the centre.
iii) maxRadius – This defines the distance of the outer circle from the centre.
iv) bandNo – this is the text that defines the current band.
If at all only one circle has to be drawn, then minRadius == maxRadius.
“arc” object divides the band into sections. This object has a constructor with the following parameters.
i) Band – instance of Band object which contains the information of the current circle.
ii) startAngle –Defines the starting angle of the arc.
iii) endAngle – defines the end angle of the arc.
iv) text – the text to be display in the arc.
v) arcNo- the arc number.
vi) alignment- defines where the text is to be aligned (left/right/centre).
Steps to Draw Concentric circles:
1) Create an instance of Point which defines the centre point.
2) Create instances of Band objects depending on the number of bands required.
3) Create instances of Arc depending on the number of sections required in a band.
The start angle and end angle in the arc object needs to be converted to quadrants which is achieved by multiplying the numerical value with Pi.
Eg. For creating 6 sections around in a band, following are the instance of Arc object.
Where r1 represent the band instance.
4) After creating the instances of the all the 3 objects according to requirement, drallAll method is called.
drawAll method loops through each arc instance which is passed to drawArc method to draw the section (arc).
drawArc method contains the canvas context which draws the section by retrieving information from the arc instance.
The function track_mouse tracks the position of mouse. The current position is passed to checkMousePos method. Inside the checkMousePos, each arc instance is checked against the current position. If current position is inside an arc, the particular arc is highlighted.
So there you have it – a simple way to create powerful dynamic images in your web pages with HTML5. Used Canvas yourself? Share your experience and thoughts on the above or questions you may have in the comments below.