North Vancouver Web Design and Development Vancouver

HTML5 Canvas – Arcs

HTML5 is sweet and I have been experimenting with it’s canvas using Javascript and CSS to render a user interface and graphics. In the example below I am drawing multiple circles and arcs on the canvas tag. This could be used online or in an app for charting or statistics, even a clock.

Your browser does not support HTML5 Upgrade your browser now

Code Example Below:

var ctx = $(‘#stat-arcs’).get(0).getContext(‘2d’);
ctx.lineWidth = 20;

ctx.beginPath();
ctx.arc(124, 124, 120, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();
ctx.beginPath();
ctx.arc(124, 124, 100, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();
ctx.beginPath();
ctx.arc(124, 124, 80, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();
ctx.beginPath();
ctx.arc(124, 124, 60, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();

ctx.beginPath();
ctx.arc(124, 124, 110, 1.5*Math.PI, 1.05*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.strokeStyle =’#1E263C’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 90, 1.5*Math.PI, 1.25*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.strokeStyle =’#435A6D’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 70, 1.5*Math.PI, 1.0*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’111111′;
ctx.strokeStyle =’#57708A’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 50, 1.5*Math.PI, 0.8*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.strokeStyle =’#95AABD’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 40, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();

Canvas Code:
... id="stat-arcs" width="248" height="248"...
Please note HTML5 does not work in IE8 or older, but those users see the text in between the canvas tags as seen below.

Results as PNG image in modern browsers as seen below.

HTML5 developer in Vancouver