Import the Canvas class from @infinite-canvas-tutorial/core.

import { Canvas } from '@infinite-canvas-tutorial/core';
const canvas = new Canvas({});

constructor

export interface CanvasConfig {
    canvas: HTMLCanvasElement | OffscreenCanvas;
    renderer?: 'webgl' | 'webgpu';
    shaderCompilerPath?: string;
    devicePixelRatio?: number;
    theme?: Theme;
    themeColors?: {
        [Theme.LIGHT]: {
            background: string;
            grid: string;
        };
        [Theme.DARK]: {
            background: string;
            grid: string;
        };
    };
    checkboardStyle?: CheckboardStyle;
    mode?: CanvasMode;
}

canvas

Pass in HTMLCanvasElement in the browser environment, OffscreenCanvas in the WebWorker environment, and node-canvas in the Node.js environment.

renderer

Set the renderer, optional values are webgl and webgpu, default value is webgl.

shaderCompilerPath

Set the WebGPU shader compiler path, default value is https://unpkg.com/@antv/[email protected]/dist/pkg/glsl_wgsl_compiler_bg.wasm.

devicePixelRatio

Set the device pixel ratio, default value is window.devicePixelRatio.

theme

Set the theme, optional values are Theme.LIGHT and Theme.DARK, default value is Theme.LIGHT.

themeColors

Set the theme colors, default value is

{
    [Theme.LIGHT]: {
        background: '#fbfbfb',
        grid: '#dedede',
    },
    [Theme.DARK]: {
        background: '#121212',
        grid: '#242424',
    },
}

checkboardStyle

Set the grid style, optional values are CheckboardStyle.NONE、CheckboardStyle.GRID and CheckboardStyle.DOTS, default value is CheckboardStyle.GRID.

mode

Set the canvas mode, optional values are CanvasMode.HAND and CanvasMode.SELECT, default value is CanvasMode.HAND.

plugins

内置插件的配置。

dragndrop

• overlap How drops are checked for.
  • pointer – the pointer must be over the dropzone (default)
  • center – the draggable element’s center must be over the dropzone
• dragstartTimeThreshold number Threshold for triggering dragstart event in milliseconds.
• dragstartDistanceThreshold number Threshold for triggering dragstart event in pixels.

selector

• selectionBrushSortMode How to sort selected shapes.
  • directional – Sort by direction
  • behavior – Sort by behavior
• selectionBrushStyle Style of the selection brush. Any style except d that can be applied to a Path.

render

Creates an animation loop for rendering the canvas.

const animate = () => {
    canvas.render();
    requestAnimationFrame(animate);
};
animate();

resize

Resizes the canvas.

canvas.resize(100, 200);

destroy

Destroys the canvas.

canvas.destroy();

appendChild

Adds an element to the canvas. Similar to Node.appendChild

canvas.appendChild(circle);

removeChild

Removes an element from the canvas. Similar to Node.removeChild

canvas.removeChild(circle);

elementsFromPoint

Gets all shapes at the specified point in world coordinates. Method signature as follows, reference: Document.elementsFromPoint

elementsFromPoint(x: number, y: number): Shape[]

elementFromPoint

Gets the topmost shape at the specified point in world coordinates. Method signature as follows, reference: Document.elementFromPoint

elementFromPoint(x: number, y: number): Shape

client2Viewport

Converts a point from client coordinates to viewport coordinates.

client2Viewport({ x, y }: IPointData): IPointData

viewport2Client

Converts a point from viewport coordinates to client coordinates.

viewport2Client({ x, y }: IPointData): IPointData

zoomIn

Zooms in the canvas using the camera.

canvas.zoomIn();

zoomOut

Zooms out the canvas using the camera.

canvas.zoomOut();

checkboardStyle

Gets or sets the canvas grid style, default value is CheckboardStyle.GRID.

export enum CheckboardStyle {
    NONE,
    GRID,
    DOTS,
}

canvas.checkboardStyle = CheckboardStyle.DOTS;

theme

Gets or sets the canvas theme, default value is Theme.LIGHT.

canvas.theme = Theme.DARK;

getDOM

Gets the created Canvas DOM element. The returned DOM element varies depending on the environment.

const canvas = new Canvas({
    canvas: document.createElement('canvas'),
});
const dom = canvas.getDOM(); // returns HTMLCanvasElement

getDPR

Gets the device pixel ratio of the canvas.

const dpr = canvas.getDPR(); // 2

getDevice

Gets the canvas device, then use its API to create various low-level GPU objects, reference: Device.

const device = canvas.getDevice();

toDataURL

Returns a DataURL of the exported canvas image, reference: HTMLCanvasElement.toDataURL.

const dataURL = await canvas.toDataURL();

Parameters:

export interface DataURLOptions {
    /**
     * The default type is image/png.
     */
    type: DataURLType;
    /**
     * The image quality between 0 and 1 for image/jpeg and image/webp.
     */
    encoderOptions: number;
    /**
     * Whether to draw grid on the image.
     */
    grid: boolean;
}