HTML5 Canvas Call same function Twice?

Question

I'm getting very confused here, though i'm very new to the HTML 5 canvas.

Basically I have this function:

function drawcircle(x,y)
{
    context.save();
    context.strokeStyle = '#00ff00';
    context.fillStyle = '#000000';
    context.lineWidth=10;
    context.beginPath();
    context.arc(x,y,50,0,Math.PI * 2,false)
    context.stroke();
    context.fill();
    context.endPath();
    context.restore();
}

I then try to call it twice like so:

    // call the initialise and draw functions
initialise();
drawcircle(100, 100);
drawcircle(100, 200);

However it will only ever draw the first circle seemingly, whatever order the first circle will be drawn but not the second, how would I go about remedying this?

Esailija · Accepted Answer · 2012-11-29 09:32:43Z

1

It should be closePath(), not endPath(), your function will error before .restore() so it's never called and the second call will happen with state left from previous call.

function drawcircle(x,y)
{
    context.save();
    context.strokeStyle = '#00ff00';
    context.fillStyle = '#000000';
    context.lineWidth=10;
    context.beginPath();
    context.arc(x,y,50,0,Math.PI * 2,false)
    context.stroke();
    context.fill();
    context.closePath(); //Changed
    context.restore();
}

http://jsfiddle.net/kwHT5/

You should always check the javascript console for errors.

answered Nov 29, 2012 at 9:32

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ste Hawkins Over a year ago

Bah I'm such a fool, Thanks for the help!

Collectives™ on Stack Overflow

HTML5 Canvas Call same function Twice?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related