Skip to main content

Rendering on canvas

experimental

drawOnCanvas is an experimental feature.

Hence, bugs or API changes is expected during the development. Use it at your own risk.

You can render those primitives on a canvas. The primitive has a built-in callback, drawOnCanvas, that serve this exact purpose.

drawOnCanvas​

This callback takes in a CanvasRenderingContext2D canvas context and draw primitive on it.

// Triangle primitive
const { drawOnCanvas } = useTriangle();

// Canvas ref
const canvasRef = useRef();

// Getting canvas context
const ctx = canvasRef.current.getContext("2d");

// Draw on canvas
drawOnCanvas(ctx);

// Add a stroke or fill or other operation as desired
ctx.stroke(); // or ctx.fill();

// Binding canvas to a ref
<canvas ref={canvasRef} />;
info

drawOnCanvas does not handle the drawing cycle for you. It will only draw once for each call.

If you want to constantly animate it, you will need to trigger drawOnCanvas on every frame or changes.