Question

just for fun and for learning purposes, I’m currently writing a javascript-based paint application, but I’ve experienced a little cross-browser problem with the drawing code of the oval shape.

Here’s my code, reduced to a simple oval function:

function Oval(context, x, y, radiusX, radiusY, color, filled) {
  if ((radiusX === 0) || (radiusY === 0)) {
    return;
  }
  context.save();
  context.translate(x, y);
  if (radiusX !== radiusY) {
    context.scale(1, radiusY / radiusX);
  }
  context.beginPath();
  context.arc(0, 0, radiusX, 0 , 2 * Math.PI);
  context.closePath();
  context.restore();
  if (filled === true) {
    context.fillStyle = color;
    context.fill();
  } else {
    context.strokeStyle = color;
    context.stroke();
  }
}

var ctx = c.getContext("2d");
Oval(ctx, 150, 150, 100, 149, "#663399", false);

<canvas id="c" width="300" height="300"></canvas>

This works nice in current stable versions of Firefox, Chrome, Internet Explorer and Safari. But Opera doesn’t seem to like it. What might be the problem ?

Answer 1

This is because Opera requires the last argument to arc

So change it to context.arc(0, 0, radiusX, 0 , 2 * Math.PI, false); and you’ll be golden.