Skip to main content

Canvas Provider

The Canvas Provider implements Auxilary functionality for the Canvas component. It implements the following:

  • Initializes a Canvas element and calls its script prop with the canvas' ref.
  • Attaches an Intersection Observer and monitors the position of the Canvas on the body.
  • Initializes an animation loop if given one.
  • If the canvas is outside the viewport and an animation loop is in progress, it halts the loop until the canvas is back in the viewport.

Example#

Drawing a Circle on a canvas

function script(canvas) {    const ctx = canvas.getContext("2d");    ctx.beginPath();    ctx.arc(100, 75, 50, 0, 2 * Math.PI);    ctx.stroke();
    function animate() {        // Animation Loop    }
    return animate;}
function Canvas() {    return (        <CanvasProvider             script={script}             style={{                width: "100%",                height: "100%",            }}        />    )}

Props#

PropTypeDefaultRequired
script(canvas: HTMLCanvasElement) => (() => void)nonetrue
stylesReact.CSSPropertiesnonefalse

script#

This prop is a function that receives a ref to the canvas element as its parameter. We can use this function to draw whatever we like on the canvas.

This function returns its animation loop. This is another function that is passed into requestAnimationFrame to drive canvas-based animations.

style#

This is a React.CSSProperties object that overwrites the style of the underlying canvas. Use this to set CSS properties like background-color and border-radius