Basic starting point for any canvas-sketch with comments of my commonly used/altered settings

canvas-sketch-base-template.js

const canvasSketch = require('canvas-sketch');
const Random = require("canvas-sketch-util/random");


// ****** If using random ******
// Set a random seed so we can reproduce this print later
const defaultSeed = "";
Random.setSeed(defaultSeed || Random.getRandomSeed());
// Print to console so we can see which seed is being used and copy it if desired
console.log("Random Seed:", Random.getSeed());

const settings = {
  // Measured in selected unit, unless paper size constant ie A4
  dimensions: [ 2048, 2048 ],
  // Use if using a defined paper size constant for dimensions
  //    orientation: 'landscape' // also supports 'portrait'
  // All our units are px
  units: 'px', //"cm"`, `"px", "mm"

  // Can be an existing canvas context, or a string like "webgl" or "2d" hinting which canvas type should be created.
  //    context: "2d", //"webgl" 

  //context	String | Context	"2d"	

  // Use a higher density for print resolution (this defaults to 72, which is good for web)
  //  	pixelsPerInch: 300,
  //  You can pad the dimensions of your artwork by `bleed` units, e.g. for print trim and safe zones.
  //    bleed: 0,

  // When true, scales down the canvas to fit within the browser window.
  //    scaleToFit: true,
  // When true, scales up or down the canvas so that it is no larger or smaller than it needs to be based on the window size. This makes rendering more crisp and performant, but may not accurately represent the exported image. This is ignored during export.
  //    scaleToView: false,


  // **** Animation settings *****
  // Enable an animation loop
  //    animate: true,
  // Loop when reaching end of duration
  //    loop: true,
  // Set loop duration in seconds
  // 	  duration: 3,
  // Optionally specify a frame rate
  // 	  fps: 24,


  // **** File name output settings *****
  prefix: "test",
  // suffix: "",

  // tip: if you render at [ 1024, 1024 ] dimensions, but scale down the GIF while encoding, you might end up with more crisp lines: `canvas-sketch my-sketch.js --stream [ gif --scale=512:-1 ]`
};

const sketch = () => {
  // Set local state outside of renderer for consistency across renders, like random values

  // Other render props:
  //    time, The current elapsed time of the loop in seconds
  //    playhead, The current playhead of the loop, between 0 and 1 (inclusive), which will always be 0 when duration and totalFrames is not defined.
  //    deltaTime, The delta time in seconds since last frame
  return ({ context, width, height }) => {
    context.fillStyle = 'white';
    context.fillRect(0, 0, width, height);
  };
};

canvasSketch(sketch, settings);