jQuery and JavaScript Phrasebook

Adding HTML5 Canvas Graphics

Click here to view code image

var c = $("canvas").get(0); var lineValues = [10,15,80,79]; c.width = c.width; var xAdj = c.width/lineValues.length; var ctx = c.getContext("2d"); ctx.fillStyle = "#000000"; ctx.strokeStyle = "#00ff00"; ctx.lineWidth = 3; var x = 1; ctx.moveTo(x,(c.height)); for (var idx in lineValues){   var value = parseInt(lineValues[idx]);   ctx.lineTo(x+xAdj, (c.height - value));   x += xAdj; } ctx.stroke();

As HTML5 begins to become more and more mainstream, many possibilities open up for graphics. Using dynamic jQuery and JavaScript code with the new <canvas> element, you can easily provide some rich, interactive graphics to your web pages.

Using JavaScript, you can access the <canvas> element, ...