example of declarative GUI support in canvas-sketch library

canvas-sketch-example-gui.js

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

const settings = {
  dimensions: [ 2048, 2048 ],
  params: {
    size: {
      min: 50,
      max: 400,
      step: 1,
      value: 200
    },
    lineWidth: {
      min: 1,
      max: 20,
      step: 0.01,
      value: 10
    },
    stroke: false,
    text: 'test',
    foreground: 'white',
    background: '#F8C9B7'
  }
};

const sketch = () => {
  return ({ context, width, height, params }) => {
    context.clearRect(0, 0, width, height);
    context.fillStyle = params.background;
    context.fillRect(0, 0, width, height);

    context.font = `${params.size}px "Andale Mono"`;
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillStyle = context.strokeStyle = params.foreground;
    context.lineWidth = params.lineWidth;
    context[params.stroke ? 'strokeText' : 'fillText'](params.text, width / 2, height / 2);
  };
};

canvasSketch(sketch, settings);

https://baku89.com/ui?lang=en