How to draw circle on multiple canvas html5?

Question

I want to draw circle on responsive canvas using javascript. I am getting width and height of canvas, but because of div tag width and height % I am able to draw circle properly. The div tag width and height are in % because I want to show 5 canvas on single page. Is there any alternative way to place 5 canvas on single page and draw a circle in each canvas using height and width of canvas? One more thing, I don't want absolute position because as per browser width I want to change canvas position

Image : 192.168.10.29/1.png

CSS

.all
{
    width:30%;
    height:45%;
    float:left;
}

canvas
{
    width:100%;
    height:100%;
}

HTML

<div id='container'>
<div class='all'>
<canvas id='clock1' style="border:solid">
</div>
<div class='all'>
<canvas id='clock2' style="border:solid">
</div>
<div class='all'>
<canvas id='clock3' style="border:solid">
</div>
<div class='all'>
<canvas id='clock4' style="border:solid">
</div>
<div class='all'>
<canvas id='clock5' style="border:solid">
</div>
</div>

Javascript

function draw(canvasarray)
{

    var clock = document.getElementById(canvasarray);

    var style = getComputedStyle(document.getElementById(canvasarray));

    var height = parseInt(style.getPropertyValue("height"),10);
    var width = parseInt(style.getPropertyValue("width"),10);

    var radius = 0;

    console.log('Width : ' + width + ' Height : ' + height);

    if(width < height)
    {
        radius = width/2;
    }
    else
    {
        radius = height/2;
    }
    console.log('Radius : '+ radius);
    var ctx = clock.getContext('2d');
    ctx.beginPath();
    ctx.arc(width/2,height/2,radius,0,Math.PI*2);
    ctx.stroke();
}

Unknown Unknown · Accepted Answer · 2014-01-24T08:19:53

You can define an array first with all your canvases:

/// store references to element directly - define in global scope
var canvasArray = [
    document.getElementById('clock1'),
    document.getElementById('clock2'),
    document.getElementById('clock3'),
    document.getElementById('clock4'),
    document.getElementById('clock5')
]

This will now keep a reference to each clock canvas so we don't have to look them up each time.

Then ref. your previous question we can separate the resize code from the draw code:

function resizeCanvases() {

    /// iterate array and update each canvas' bitmap according to CSS size
    for(var i = 0, c; c= canvasArray[i]; i++) {
        var style = getComputedStyle(c);
        c.width   = parseInt(style.getPropertyValue("width"),10);
        c.height  = parseInt(style.getPropertyValue("height"),10);
    }

    draw(canvasArray);
}

/// initial call when code starts
resizeCanvases();

/// update when window resizes (remember to redraw as well)
window.addEventListener('resize', resizeCanvases, false);

Now we can focus on the draw code:

function draw(clocks) {

    var clock,
        ctx,
        width, height,
        radius,
        i = 0;

    for(; clock = clocks[i]; i++) {

        /// get dimension of this canvas - remember to subtract line width
        width = clock.width;
        height = clock.height;

        /// get radius
        radius = Math.min(width, height) * 0.5;

        /// draw circle
        ctx = clock.getContext('2d');
        ctx.beginPath();
        ctx.arc(width/2,height/2,radius,0,Math.PI*2);
        ctx.stroke();
    }
}

Then call:

draw(canvasArray);

when needed.

Update

Ref. the problems in the image. I have this result:

Snapshot

I modified your CSS slightly but it should not affect the looks however, but makes the reflow a little better:

.all
{
    width:30%;
    height:45%;
    display:inline-block;
    /*float:left;*/
}

as well as:

html, body {
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
}

Chrome seem to have problems with the CSS though (or with getComputedStyle() in which case it may be an issue) while it works fine in Firefox and Opera.

Fiddle here

Hope this helps!

How to draw circle on multiple canvas html5?

1 Answers