Module: CanvasView

Interfaces

• CanvasProps
• CanvasRenderingContext2D
• ImageData

Functions

Canvas

▸ Canvas(props): Element

A canvas component providing drawing functions similar to 2dcontext.

export default function App() {
  const [drawingContext, setDrawingContext] = useState<
    CanvasRenderingContext2D
  >();

  const handleContext2D = useCallback(
    async (ctx: CanvasRenderingContext2D) => {
      setDrawingContext(ctx);
    },
    [setDrawingContext],
  );

  useLayoutEffect(() => {
    const ctx = drawingContext;
    if (ctx != null) {
      ctx.clear();

      ctx.fillStyle = '#fb0fff';
      ctx.fillRect(40, 160, 64, 72);
      ctx.strokeStyle = '#00ffff';
      ctx.lineWidth = 6;
      ctx.strokeRect(40, 160, 64, 72);

      ctx.invalidate();
    }
  }, [drawingContext]);

  return (
    <Canvas style={StyleSheet.absoluteFill} onContext2D={handleContext2D} />
  );
}

component

Parameters

Name	Type
props	CanvasProps

Returns

Element