canvas-converse

To more easily "converse" with the canvas API.

Live demos

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

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", rotationX: 400, rotationY: 420 }, (ctx) =>
  ctx.arc(400, 420, 50, 0, 1.5 * Math.PI)
);
cc.makeOutlineGroup({
  drawShapesCallback: () => {
    cc.ellipse({
      x: 200,
      y: 200,
      r: 75,
      fill: "yellow",
    });
    cc.triangle({
      x1: 100,
      y1: 310,
      x2: 200,
      y2: 200,
      x3: 300,
      y3: 310,
      fill: "green",
    });
  },
  stroke: "#626",
  fill: "#33A8FF",
  lineWidth: 20,
});

And much more in the demo.js!

CDN usage

<script
  src="https://cdn.jsdelivr.net/gh/hchiam/[email protected]/script.js"
  integrity="sha384-G9inG5H5LredknDKEPnsc8fgFeUnwP8pMZ2gISwvRqNxP/JALV7iaG+4+SwkmNLz"
  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