Disegnare un'ellisse con p5.js
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();