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/[email protected]/script.js

Example usage

import { CanvasConverse } from "https://cdn.jsdelivr.net/gh/hchiam/[email protected]/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.line({
  x1: 0,
  y1: 0,
  x2: 100,
  y2: 100,
  lineWidth: 10,
  stroke: "lightblue",
});
cc.draw({ fill: "lime" }, (ctx) => ctx.arc(400, 420, 50, 0, 1.5 * Math.PI));

And much more in the demo.js!

CDN usage

<script
  src="https://cdn.jsdelivr.net/gh/hchiam/[email protected]/script.js"
  integrity="sha384-dFIbfiFWkMGn64LtO7bV7QHkOkFPa6IOfau+kwLz12XuBENAkLJSXd86Tzo6fBfB"
  crossorigin="anonymous"
></script>

documentation (automatically generated)

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

automated types check

https://arethetypeswrong.github.io/?p=canvas-converse

to learn more about the canvas API

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

reminder to self for development and deployment

vite # http://localhost:5173/demo.html
# and NOT: http://localhost:5173

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

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