Des canvas interactifs en JavaScript

Le noyau JavaScript de Basthon sait maintenant afficher un canvas vivant, comme le noyau OCaml : on dessine dessus, il s'anime, et il réagit à la souris et au clavier.

const canvas = basthon.createCanvas(400, 300);
const ctx = canvas.getContext("2d");

ctx.fillStyle = "orange";
ctx.fillRect(10, 10, 100, 50);

canvas.addEventListener("mousedown", (e) => {
  ctx.beginPath();
  ctx.arc(e.clientX, e.clientY, 10, 0, 2 * Math.PI);
  ctx.fill();
});

basthon.displayLiveCanvas(canvas);

Le canvas reste vivant après l'exécution : tout ce qui y est dessiné ensuite s'affiche, par exemple avec requestAnimationFrame pour une animation. Les coordonnées de la souris (clientX, clientY) sont celles du canvas, et les touches arrivent sur canvas.ownerDocument. L'exemple de la galerie fait rebondir des balles : un clic en ajoute une, Échap les efface.

Jouer avec !