ナンモワカランアザラシ

技術的なアレコレを自分の言葉で書いて保管・公開しておくための静かなインターネット

nodejsのcanvas

https://github.com/Automattic/node-canvas

https://github.com/kesompochy/shu-chu-sen.js を作るのに使った。

ブラウザの2D CanvasAPIとほぼ同じように使える。 createCanvascanvasを作成して、getContextでctxを取得する。取得したctxで線を引いたり四角を描いたりする。

  const canvas = createCanvas(320, 320);
  const ctx = this.canvas.getContext("2d");
  loadImage("path").then(img => {
    ctx.drawImage(img, 0, 0);
  });

Bunでやろうと思っていたのだが、まだサポートされていないようだ。なのでnodejsで動かすようにした。 https://github.com/oven-sh/bun/issues/5835