Ellipse draining with Canvas method

Draw the oval using the arc method, as for a circle, but changing the radius depending on the direction.

Drawinger un ovale avec canvas HTML 5

We'll actually draw an ellipse, which is a more accurate oval case. According to Wolfram, the oval does not have a mathematical definition, unlike the ellipse (although all types of ovals correspond to the formula). Ellipse as a circle visible in perspective. It is defined by a geometric figure with two axes of symmetry, while the circle is completely symmetric.
So, for simplicity's sake, let's say what we're going to draw here is a double symmetric oval or a flattened circle!

Create an ellipse using the scale method. This method changes the proportions of an object after it is defined.

scale(x, y)

The arguments are horizontal and vertical ratios. For example, if x is 0.5, the image shrinks in the width direction by 50%.

If we want to create an ellipse that is twice as wide as above, we give a value of x 1 and a factor of y 0.5 .

<canvas id="canvas3" width="400" height="200"></canvas>

function oval()
{
  var canvas = document.getElementById("canvas3"); 
  var context = canvas.getContext("2d");
  context.lineWidth="4";
  context.strokeStyle="green";
  context.scale(1, 0.5);
  context.beginPath();
  context.arc(200, 200, 180, 0, 2 * Math.PI);
  context.stroke();
}
oval();

One thing should be noted. Although the height of the channel is 100 pixels, the y argument was set to 100 for the arc method.
This is because the rock method is applied to the coordinates of the figure in the channel, not just its shape.
The ratio of 50% of the scale y argument is applied to the arc y argument, hence the vertical position of the figure.

Unfortunately, the ratio also applies to the width of the line, as a result of which the ellipse plot does not have an even thickness.

Full code for drawing an ellipse

To have the correct contour, you must restore the original context after calling the scale and before the impact to undo the change in proportions with respect to the thickness of the contour (while applying its shape).

The final code for drawing the entire oval:

<canvas id="canvas4" width="400" height="200"></canvas>

function drawOval(x, y, rw, rh)
{
  var canvas = document.getElementById("canvas4"); 
  var context = canvas.getContext("2d");
  context.save();
  context.scale(1,  rh/rw);
  context.beginPath();
  context.arc(x, y, rw, 0, 2 * Math.PI);
  context.restore();
  context.lineWidth=4;
  context.strokeStyle="orange";
  context.stroke();  
}

drawOval(200,200,180, 90);

The parameters specify the horizontal and vertical radius. The vertical ratio for the scaling method is the ratio of these two rays, rh/rw.

Documents and articles relating to: