Scale command applying to multiple shapes

Question

Wondering why the scale parameter of the variable ´ell´ is applying to the next two circles I have created as well:

    var ell=canvas.getContext("2d")
    ell.beginPath()
    ell.lineWidth=2
    ell.fillStyle="#FFFFFF"
    ell.strokeStyle="#000000"
    ell.scale(1.2,0.5)
    ell.arc(125,190,30,0,2*Math.PI,false)
    ell.fill()
    ell.stroke()

    var circ=canvas.getContext("2d")
    circ.beginPath()
    circ.lineWidth=1
    circ.fillStyle="#FFFFFF"
    circ.strokeStyle="#000000"
    circ.arc(150,95,15,0,2*Math.PI,false)
    circ.fill()
    circ.stroke()

    var circ2=canvas.getContext("2d")
    circ2.beginPath()
    circ2.fillStyle="#1d1d1d"
    circ2.arc(155,90,4,0,2*Math.PI,false)
    circ2.fill()

It's supposed to be an eyeball, the first shape is an oval and the next two are supposed to be circles, however they are getting squished by the scale command, and their positions are thrown off as well.

Any help appreciated, thanks!!

Answer 1

You could either use setTransform and reset the scale manualy or call save() before applying the scale and call restore() when your done with it.

var ctx=canvas.getContext("2d")
ctx.save(); // save the context state
ctx.beginPath();
ctx.lineWidth=2;
ctx.fillStyle="#FFFFFF";
ctx.strokeStyle="#000000";
ctx.scale(1.2,0.5);
ctx.arc(125,190,30,0,2*Math.PI,false);
ctx.fill();
ctx.stroke();
ctx.restore(); // restore the state to the last save()

// you can reuse the same context
ctx.save();
ctx.beginPath();
draw the second circle...

take a look at https://developer.mozilla.org/en/Canvas_tutorial/Transformations