canvas-sketch + typescript

about.md

canvas-sketch + TypeScript

After installing canvas-sketch globally, create a new folder to hold your sketch:

mkdir my-sketch
cd my-sketch

Now run the following to generate a new default .ts file, package.json, etc:

canvas-sketch sketch.ts --new

Once the server is running, kill it (Ctrl + C) and run the following to grab TypeScript, plugin and Node.js definitions:

npm install typescript tsify @types/node --save-dev

Now, overwrite the default file with the full sketch.ts code in this gist. If you copy the code to clipboard you can run the following:

pbpaste > sketch.ts

Now you can run canvas-sketch again, but make sure to specify the tsify plugin like so, after a 'full stop' flag (--) which will pass down any additional browserify transforms/plugins.

canvas-sketch sketch.ts --open -- -p [ tsify --noImplicitAny ]

Congrats! Now you are using TypeScript with canvas-sketch.

sketch.ts

const canvasSketch = require('canvas-sketch');

const settings = {
  duration: 5,
  animate: true,
  dimensions: [ 512, 512 ]
};

interface Props {
  context: CanvasRenderingContext2D;
  width: number;
  height: number;
  time: number;
  playhead: number;
}

const sketch = () => {
  return ({ context, width, height, playhead }: Props) => {
    context.fillStyle = 'hsl(0, 0%, 95%)';
    context.fillRect(0, 0, width, height);

    const x: number = width / 2;
    const y: number = height / 2;
    const radius: number = width * 0.25;
    const start: number = Math.sin(playhead * Math.PI * 2) * Math.PI;
    const end: number = start + Math.PI / 2 + Math.sin(playhead * Math.PI * 2 + Math.PI / 2) * Math.PI * 0.4;
    const thickness: number = width * 0.01 + (Math.sin(playhead * Math.PI * 2) * 0.5 + 0.5) * width * 0.05;

    context.beginPath();
    context.arc(x, y, radius, start, end, false);
    context.lineWidth = thickness;
    context.lineJoin = 'round';
    context.lineCap = 'round';
    context.strokeStyle = 'tomato';
    context.stroke();
  };
};

canvasSketch(sketch, settings);

For anyone who is still coming here, my advice is to use typescript through JSDoc:

• To install typescript and @types/node as a dev dependency (example: npm install -D typescript @types/node)
• init the tsconfig.json using npx tsc --init and adding "checkJs": true and "allowJs": true to the "compilerOptions"
• Then run the project normally (for example canvas-sketch sketch.js --open)

No need to download extra libs that will through weird errors which could lead to you overriding node_modules files 🙂

And the code example file in this gist will be

sketch.js

// @ts-ignore
const canvasSketch = require("canvas-sketch");

const settings = {
  duration: 5,
  animate: true,
  dimensions: [512, 512],
};

/**
 * @typedef {{
 *   context: CanvasRenderingContext2D;
 *   width: number;
 *   height: number;
 *   time: number;
 *   playhead: number;
 * }} Props
 */

const sketch = () => {
  /** @param {Props} props */
  return ({ context, width, height, playhead }) => {
    context.fillStyle = "hsl(0, 0%, 95%)";
    context.fillRect(0, 0, width, height);

    const x = width / 2;
    const y = height / 2;
    const radius = width * 0.25;
    const start = Math.sin(playhead * Math.PI * 2) * Math.PI;
    const end =
      start +
      Math.PI / 2 +
      Math.sin(playhead * Math.PI * 2 + Math.PI / 2) * Math.PI * 0.4;
    const thickness =
      width * 0.01 +
      (Math.sin(playhead * Math.PI * 2) * 0.5 + 0.5) * width * 0.05;

    context.beginPath();
    context.arc(x, y, radius, start, end, false);
    context.lineWidth = thickness;
    context.lineJoin = "round";
    context.lineCap = "round";
    context.strokeStyle = "tomato";
    context.stroke();
  };
};

canvasSketch(sketch, settings);