Dessiner une ellipse avec la méthode arc de Canvas

On trace un ovale avec la méthode arc, comme pour le cercle, mais en modifiant le rayon selon la direction.

Dessiner un ovale avec canvas HTML 5

En fait on va tracer une ellipse, qui est un cas d''ovale plus précis. Selon Wolfram, l'ovale n'a pas de définition mathématique, contrairement à l'ellipse (bien que toutes sortes d'ovales correspondent à une formule). L'ellipse est comme un cercle vu en perspective. Elle se définit par une figure géométrique avec deux axes de symétrie, alors que le cercle est entièrement symétrique.
Donc, pour simplifier, disons que ce que nous allons tracer ici est un ovale à double symétrie ou un cercle aplati!

Réaliser une ellipse se fait avec la méthode scale. Cette méthode modifie les proportions d'un objet après sa définition.

scale(x, y)

Les arguments sont le ratio horizontal et le ratio vertical. Si l'on donne par exemple à x la valeur 0.5, l'image sera réduite de 50% dans le sens de la largeur.

Si l'on veut créer une ellipse qui soit deux fois plus large que haut, on donnera à x la valeur 1 et à y le ratio 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();

Il faut remarquer une chose. Bien que la hauteur du canevas soit de 100 pixel, on a donné à la méthode arc une valeur de 100 pour l'argument y.
C'est parce que la méthode scale s'applique aux coordonnées de la figure dans le canevas et pas seulement à la forme de celle-ci.
Le ratio de 50% de l'argument y de scale s'applique à l'argument y de arc donc à la position verticale de la figure.

Malheureusement le ratio s'applique aussi à la largeur de la ligne, ce qui fait que le tracé de l'ellipse n'a pas une épaisseur régulière.

Code complet pour dessiner une ellipse réguliere

Pour avoir un tracé régulier, on doit restaurer le contexte initial après l'invocation de scale et avant celle de stroke, de façon que la modification des proportions soit annulée pour ce qui concerne l'épaisseur du tracé (tout en s'appliquant à sa forme).

Le code final pour tracer tout ovale: 

<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);

On donne en paramètres le rayon horizontal et le rayon vertical. Le ratio vertical pour la méthode scale est alors le rapport entre ces deux rayons, rh / rw.

Documents et articles relatifs: