Skip to main content


@auvious/sketch / Exports


A sketch tool to draw on a canvas using paper-js.


  1. npm install
  2. npm run build
  3. npm run build:test
  4. npm test


  1. cd demo
  2. npm install
  3. npm start


Caution: all values used, like scale, scrol, etc.. are in absolute units.

import { Sketch } from "@auvious/sketch";

// let these be
const canvas: HTMLCanvasElement;
const auviousClient: AuviousClient;
let sketchId: string;
const userId: string;
const userEndpointId: string;
const div: HTMLDivElement; // some content below canvas
const log = (event) => console.log(event);

// create a new sketch only using this static method
const sketch = Sketch.create(canvas, auviousClient);

// once created you can immediately draw offline
// even without actually using the auvious client

// to connect, could be called later if at all
sketchId = await sketch.connect({
sketchId, // when given it joins, if not, it creates one; get it at sketch.sketchId

// when online, you might need to listen to errors
// no other events currently available"error", log);

// remove previous callback"error", log);

// or remove all"error");

// at the end, remove handlers;

// internally there are tools which you enable
// these handle user's actions on canvas differently

// each one has a disable, call it when you want no tool to be active

// all tools above support cancellation when user presses ESC

// clear canvas

// scroll canvas, best used when it overlays scrollable content
sketch.scrollTo(div.scrollTop, div.scrollLeft);

// resize area
sketch.resize(300, 150);

// scaling

// when sharing is enabled, clients will likely have different sizes for their canvases
// when needed, like in the case of overlaying content of common dimensions
// the scale can be synced to a virtual width of default 1280 size, a value that must be the same for all
// this will only enable syncing, the actual autoscaling happens in .resize

// horizontal mirroring

// when the canvas has focus however, the user cannot scroll the div
// when no tool is selected, it would be best for the canvas to not accept events = "none";

// use "auto" to make it focusable when user picks a tool

// customize marker and arrow tools
sketch.marker.options.strokeColor = "#123f";