Database Reference
In-Depth Information
in
dashboard/public/javascripts/canvas.js
,thatdrawsacircular
gauge like the one shown in
Figure 7.5
:
function drawGauge(ctx,value,max) {
//Clear the gauage
ctx.fillStyle = "#fff";
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
//Draw the gauge background
var centerX = (ctx.canvas.width) / 2;
var centerY = (ctx.canvas.height) /2;
var radius = Math.min(centerX,centerY) - 12.25;
ctx.beginPath();
ctx.arc(centerX,centerY,radius,0.6*Math.PI,2.4*Math.PI)
ctx.strokeStyle = "#ddd";
ctx.lineWidth = 25;
ctx.stroke();
var newEnd = (2.4-0.6)*(value/max) + 0.6;
ctx.beginPath();
ctx.arc(centerX,centerY,radius,0.6*Math.PI,newEnd*Math.PI)
ctx.strokeStyle = "#aaa";
ctx.lineWidth = 25;
ctx.stroke();
}
The function first needs to clear the drawing surface, which is done with the
clearRect
function. Note that the canvas knows its own internal size, so
the size of the rectangle does not need to be hardcoded. Next, a background
arc is drawn to provide context for the gauge itself. This uses the
arc
function to draw a partial circle. Rather than attempting to draw the outer
and inner arcs and filling the result, the
lineWidth
is set to a relatively
high value and then the path is
stroke
'd rather than filled to produce the
background. Theradiusisadjustedslightlysothattheouteredgeofthepath
does not fall outside of the canvas.
The entire process is repeated again using a slightly darker color to indicate
the gauge value. For this second path, a new ending position is calculated
