Canvas Ellipse

by zolotnitskiy

HTML

<body>
  <canvas id="myCanvas" width="578" height="200"></canvas>
  <canvas id="myCanvas2" width="578" height="200"></canvas>
</body>

JavaScript

function ellipse(context, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {  
	context.save(); // save state
  context.beginPath();
  // translate context
  context.translate(x, y);
  context.rotate(rotation);
  context.translate(-radiusX, -radiusY);

  // scale context horizontally
	context.scale(radiusX, radiusY);

  // draw circle which will be stretched into an oval
	context.arc(1, 1, 1, startAngle, endAngle, false);
  context.closePath();
	context.restore(); // restore to original state
  context.moveTo(x, y);
}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.save(); // save state
ellipse(ctx, 100, 100, 75, 50, 45 * Math.PI/180, 0, 2 * Math.PI);
ctx.fillStyle = 'rgba(90,90,90, 0.3)';
ctx.fill();
ctx.strokeStyle = 'rgba(30,30,30, 0.3)';
ctx.stroke();
ctx.restore(); // restore to original state

canvas = document.getElementById("myCanvas2");
ctx = canvas.getContext("2d");
ctx.save(); // save state
ctx.beginPath();
ctx.ellipse(100, 100, 75, 50, 45 * Math.PI/180, 0, 2 * Math.PI);
ctx.stroke();
ctx.restore(); // restore to original state