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