O'Reilly logo

jQuery and JavaScript Phrasebook by Brad Dayley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding HTML5 Canvas Graphics

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required