@ripl/canvas

The Canvas 2D rendering context for Ripl: rasterizes the scene graph to an HTML <canvas> through CanvasRenderingContext2D.

Features

• Ripl's default backend — implements the Context abstraction on the native Canvas 2D API, so the same drawing code also runs on SVG, the terminal or a custom context.
• Device pixel ratio handled for you — the backing store scales with the display while every coordinate you author, every bounding box and every pointer payload stays in CSS pixels.
• Native paint objects — CSS gradient and pattern strings in fill and stroke are parsed and cached into CanvasGradient and CanvasPattern instances, keyed so repeated paints reuse them.
• Browser hit testing — isPointInPath/isPointInStroke run against the browser's own implementation, under both fill rules.
• Path2D caching — supportsPathCaching is true here, so a shape whose state has not changed replays its built path instead of re-tracing it each frame.
• Text along a path and full stroke/fill state: caps, joins, dashes, miter limit, shadows, filters and blend modes.
• Snapshot export — PNG data URL, Blob object URL, or raw ImageData.

Installation

Most browser projects should install @ripl/web instead. It re-exports this package alongside @ripl/core and registers the browser platform bindings, which this context needs for text measurement and frame scheduling.

# npm
npm install @ripl/canvas

# yarn
yarn add @ripl/canvas

# pnpm
pnpm add @ripl/canvas

Quick start

import {
    createContext,
} from '@ripl/canvas';

import {
    createCircle,
} from '@ripl/core';

const context = createContext('.mount-element');

createCircle({
    fill: 'linear-gradient(135deg, #3a86ff, #8338ec)',
    cx: context.width / 2,
    cy: context.height / 2,
    radius: 50,
}).render(context);

Every context can snapshot its current output through export():

const snapshot = context.export();

const dataUrl = snapshot.toString(); // PNG data URL
const url = snapshot.toURL(); // PNG object URL
const image = await snapshot.toImage(); // ImageData

snapshot.release(); // revokes the object URL

Key API

| Export | What it does | | --- | --- | | createContext | Binds a CanvasContext to a selector, element or existing canvas | | CanvasContext | The context itself, for typing and subclassing | | CanvasPath | Path2D-backed path builder used by every element | | toCanvasGradient / toCanvasPattern | Paint-string conversion into native canvas paints | | rescaleCanvas | Resizes the backing store for a device pixel ratio |

Related packages

• @ripl/web — the browser entry point, and what most projects should install
• @ripl/core — the elements and scene graph this context draws
• @ripl/svg — the same API, rendering to SVG instead
• @ripl/3d — a 3D context built on this one

Documentation

Guides, live demos and the full API reference are at ripl.run/docs/core/contexts/canvas.

License

MIT