Awesome

canvas-converse

To more easily "converse" with the canvas API.

Live demos:

• https://codepen.io/hchiam/pen/jENmOeZ
• https://canvas-converse.surge.sh

https://cdn.jsdelivr.net/gh/hchiam/canvas-converse@main/script.js

https://cdn.jsdelivr.net/gh/hchiam/canvas-converse@2.2.0/script.js

Example usage:

import { CanvasConverse } from "https://cdn.jsdelivr.net/gh/hchiam/canvas-converse@2.2.0/script.js";

const $ = (x) => document.querySelector(x);

// init
const cc = new CanvasConverse();
window.cc = cc;
cc.init($("canvas"), { w: 500, h: 500 });
cc.canvas.style.outline = "1px solid white";

// fun part
cc.rectangle({ x: 0, y: 0, w: 200, h: 200, fill: "white", physics: true });
cc.rectangle({ x: 100, y: 100, w: 300, h: 200, fill: "red" });
cc.rectangle({ x: 300, y: 50, w: 150, h: 150, fill: "cyan", stroke: "red" });
cc.triangle({
  x1: 0,
  y1: 300,
  x2: 350,
  y2: 350,
  x3: 100,
  y3: 400,
  fill: "#c2e99b",
  physics: true,
});
cc.ellipse({
  x: 100,
  y: 100,
  r: 25,
  fill: "black",
  physics: true,
});
cc.draw({ fill: "lime" }, (ctx) => ctx.arc(400, 420, 50, 0, 1.5 * Math.PI));

CDN usage:

<script
  src="https://cdn.jsdelivr.net/gh/hchiam/canvas-converse@2.2.0/script.js"
  integrity="sha384-o9x3vKfbuJsYGsaVCk1nh5bj5V4Ou5uo1W22z8Q9Rohf+xMRMZd6ZnX7O/FGctL5"
  crossorigin="anonymous"
></script>

documentation (automatically generated)

https://github.com/hchiam/canvas-converse/blob/main/documentation.md

to learn more about the canvas API

https://github.com/hchiam/learning-canvas

reminders to self for deployment

# get the thing to put into integrity="...":
bash get-integrity.sh

See how i deployed https://github.com/hchiam/how-draggable