2D canvas

Overview

For simple 2D use, Use.GPU has a Canvas 2D subsystem that doesn't require WebGPU. This is available via the @use-gpu/2d-canvas package, which has its own variant of <AutoCanvas>:

import { AutoCanvas } from '@use-gpu/2d-canvas';

const App = () => {
  return (
    <AutoCanvas
      canvas={canvas} // canvas element
      selector="#use-gpu .canvas" // OR selector
    >

    </AutoCanvas>
  )
};

<AutoCanvas> will create or adopt an HTML <canvas> to render to, and size-to-fit inside its container.

If no canvas is passed directly, the CSS selector determines the behavior. If it points to a <canvas>, it is adopted and used as is. Otherwise, a new <canvas> is created inside.

If you want to control the canvas more directly, you can use <Canvas>.

The only supported camera for 2D canvas is the Flat2DCamera. This is the 2D equivalent of FlatCamera and can be driven with the same PanControls.

2D Plot

Inside Canvas 2D, the @use-gpu/2d-plot package can be used to draw shapes. This provides a matching implementation of the same API as @use-gpu/plot, with <Plot> as the outer wrapper:

Views

• Cartesian
• Transform

Geometry

• Arrow
• Face
• Label
• Point
• Polygon
• Line

Frames

• Axis
• Grid

Clipping

• ScissorBox

Sources

• Tensor
• Sampler

Due to the inherent limitations of Canvas 2D, only 2D coordinates are supported, and some functionality is reduced (e.g. no support for per-vertex colors for lines). There is no notion of render passes or render targets.

The Canvas 2D implementation uses the same event system as WebGPU, so <Pick> can be used to make shapes pickable and interactive.