Disegnare un'ellisse con p5.js

Codice

Senza la libreria p5.js il codice necessario sarebbe dovuto essere:

// crea l'area di disegno
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
// parametri dell'ellisse
var x = 50;  // posizione orizzontale
var y = 50;  // posizione verticale
var w = 80;  // larghezza
var h = 60;  // altezza
// calcola parametri per il disegno
var xx = x - w / 2;
var yy = y - h / 2;
var kappa = 0.5522847498,
  ox = (w / 2) * kappa,
  oy = (h / 2) * kappa,
  xe = xx + w,
  ye = yy + h,
  xm = xx + w / 2,
  ym = yy + h / 2;
// disegna l'ellisse
ctx.beginPath();
ctx.moveTo(xx, ym);
ctx.bezierCurveTo(xx, ym - oy, xm - ox, yy, xm, yy);
ctx.bezierCurveTo(xm + ox, yy, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, xx, ym + oy, xx, ym);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();