Peter Lubbers - Pro HTML 5 Programming

Download from Wow! eBook
62
CHAPTER 2 ■ USING THE HTML5 CANVAS API
Listing 2-28. The getColor function
function getColor(intensity) {
var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];
return colors[Math.floor(intensity/2)];
}
Whenever the mouse moves or hovers over an area of the canvas, a point is drawn. The point grows
in size (and brightness) the longer the mouse stays in the immediate area. As shown in Listing 2-29, we
use the context.arc function to draw a circle of a given radius, and we draw a brighter, hotter color for
larger radius values by passing the radius to our getColor function.
Listing 2-29. The drawPoint function
function drawPoint(x, y, radius) {
context.fillStyle = getColor(radius);
radius = Math.sqrt(radius)*6;
context.beginPath();
context.arc(x, y, radius, 0, Math.PI*2, true)
context.closePath();
context.fill();
}
In the addToPoint function—which you will recall is accessed every time the mouse moves or hovers
over a point—a heat value is increased and stored for that particular point on the canvas. Listing 2-30
shows that the maximum point value is 10. Once the current value of heat for a given pixel is found, the
appropriate pixel is passed to drawPoint with its corresponding heat/radius value.
Listing 2-30. The addToPoint function
function addToPoint(x, y) {
x = Math.floor(x/SCALE);
y = Math.floor(y/SCALE);
if (!points[[x,y]]) {
points[[x,y]] = 1;
} else if (points[[x,y]]==10) {
return
} else {
points[[x,y]]++;
}
drawPoint(x*SCALE,y*SCALE, points[[x,y]]);
}
Finally, the initial loadDemo function is registered to be called whenever the window completes
loading.