With just a few lines of JavaScript, you can draw colorful circles on the HTML5 CANVAS element. In this tutorial you will learn how to draw filled circles, half circles, and wavy lines made from stroked partial circles. The image in this blog post was first created in an HTML5 CANVAS, and I haven't shared the code for creating it. If you think you can recreate it, post a comment with either a URL where you've done it (in an HTML5 canvas, of course) or the JavaScript you would use to create a rainbow target on a canvas. All the tools you need are included in this article.
Read the full article: Drawing Circles on HTML5 Canvas
Learn More: HTML5 Canvas
- HTML5 Canvas Tutorial
- How is the CANVAS Element Different from SVG and Flash
- Is there a 3d Canvas Context?
Image © 2012 J Kyrnin - Licensed to About.com
var can = document.getElementById(“c1″),
ctx = can.getContext(“2d”),
startPoint = (Math.PI/180)*0;
endPoint = (Math.PI/180)*360;
radius = 13*6;
colors = ['red','orange','yellow','green','blue','indigo'];
for (i=0; i<colors.length; i++){
ctx.fillStyle=colors[i];
ctx.beginPath();
ctx.arc(80,80,radius,startPoint,endPoint,true);
ctx.fill();
radius-=13
}
ctx.fillStyle='#ec80ed';
ctx.beginPath();
ctx.arc(80,80,3,startPoint,endPoint,true);
ctx.fill();
ctx.closePath();