North Van Web Design and Development | HTML5 Canvas – Arcs
507
post-template-default,single,single-post,postid-507,single-format-standard,ajax_fade,page_not_loaded,,qode_grid_1300,footer_responsive_adv,qode-content-sidebar-responsive,qode-theme-ver-13.4,qode-theme-bridge,disabled_footer_bottom,wpb-js-composer js-comp-ver-5.4.5,vc_responsive

HTML5 Canvas – Arcs

HTML5 developer in 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

No Comments

Sorry, the comment form is closed at this time.