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

L'ovale est une figure de forme ovoïde. Celle comprend l'ellipse qui est un cercle vu en perspective mais n'est est pas forcément une. L'ellipse peut se définir comme une figure géométrique avec deux axes de symétrie, alors que le cercle est entièrement symétrique. Mais selon Wolfram, l'ovale n'a pas de définition mathématique, contrairement à l'ellipse (bien que toutes sortes d'ovales correspondent à une formule).
Donc, pour simplifier, disons que ce que nous allons tracer ici est un ovale à double symétrie ou un cercle aplati!

Réaliser un ovale 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 un ovale 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 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.

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

Code complet pour dessiner une ellipse réguliere

Pour avoir un tracé régulier, on peut restaurer le contexte initial avant d'appeler la méthode stroke de façon que la modification des proportions ne s'applique pas à 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: