Canvas circles

Canvas circles using javascript

by Pralhad Sonar

HTML

<canvas width="400" height="400" id="circles"></canvas>

JavaScript

var circle = $('#circles').get(0).getContext('2d');

var circles = [
    { x:  50, y:  50, r: 25, c: "#78BA00" },
    { x: 80, y:  100, r: 35, c: "#F4B300" },
    { x: 150, y: 170, r: 15, c: "#78BA00" },
    { x:  50, y: 220, r: 20, c: "#F4B300" },
    { x:  60, y: 150, r: 10, c: "#78BA00" },
    { x: 70, y: 170, r: 15, c: "#F4B300" },
    { x:  110, y: 220, r: 16, c: "#78BA00" },
    { x:  130, y: 150, r: 7, c: "#F4B300" },
    { x:  60, y: 150, r: 11, c: "#78BA00" },
    { x: 70, y: 170, r: 12, c: "#F4B300" },
    { x:  110, y: 30, r: 21, c: "#78BA00" },
    { x:  180, y: 60, r: 8, c: "#F4B300" },    
    { x:  70, y: 90, r: 21, c: "#78BA00" },
    { x:  220, y: 110, r: 17, c: "#F4B300" }
];

function drawCircle(data) {
    circle.beginPath();
    circle.arc(data.x, data.y, data.r, 0, Math.PI * 2);
    circle.fillStyle = data.c;
    circle.fill();
}

$.each(circles, function() {
    drawCircle(this);

});