Setup to use canvas-recorder in combination with image-shader.

post-processing-canvas-sketch.ts

import { draw, options, stop, start, bootstrap } from "canvas-recorder/gl";
import { ImageShader } from "image-shader";

// @ts-ignore
import fragment from "./fragmant.glsl";

const SIZE = 1024;

const canvas = document.createElement( "canvas" );
canvas.width = SIZE;
canvas.height = SIZE;

const context = canvas.getContext( "2d" );
const shader = new ImageShader( canvas, fragment );

options( {
    size: [ SIZE, SIZE ],
    canvas: shader.domElement,
    record: false,
    clear: false,
    color: "black",
} );


draw( ( _, time: number ) => {

    // use context vairable here to draw
    shader.update();
} );

bootstrap();