canvaskit-wasm

What is canvaskit-wasm?

The canvaskit-wasm npm package is a high-performance 2D graphics library that provides a WebAssembly (WASM) port of Skia, the graphics engine used in Google Chrome and Android. It allows developers to create complex graphics and animations directly in the browser with high efficiency.

What are canvaskit-wasm's main functionalities?

Drawing Shapes

This code initializes CanvasKit, creates a canvas surface, and draws a blue rectangle on it.

const CanvasKitInit = require('canvaskit-wasm');
CanvasKitInit().then(CanvasKit => {
  const surface = CanvasKit.MakeCanvasSurface('canvas');
  const canvas = surface.getCanvas();
  const paint = new CanvasKit.SkPaint();
  paint.setColor(CanvasKit.Color(0, 0, 255, 1.0));
  canvas.drawRect(CanvasKit.LTRBRect(10, 10, 100, 100), paint);
  surface.flush();
});

Text Rendering

This code initializes CanvasKit, creates a canvas surface, and renders the text 'Hello, CanvasKit!' on it.

const CanvasKitInit = require('canvaskit-wasm');
CanvasKitInit().then(CanvasKit => {
  const surface = CanvasKit.MakeCanvasSurface('canvas');
  const canvas = surface.getCanvas();
  const paint = new CanvasKit.SkPaint();
  paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
  paint.setTextSize(30);
  canvas.drawText('Hello, CanvasKit!', 10, 40, paint);
  surface.flush();
});

Image Manipulation

This code initializes CanvasKit, creates a canvas surface, and draws an image onto the canvas once it has loaded.

const CanvasKitInit = require('canvaskit-wasm');
CanvasKitInit().then(CanvasKit => {
  const surface = CanvasKit.MakeCanvasSurface('canvas');
  const canvas = surface.getCanvas();
  const img = new Image();
  img.src = 'path/to/image.png';
  img.onload = () => {
    const skImage = CanvasKit.MakeImageFromCanvasImageSource(img);
    canvas.drawImage(skImage, 0, 0, null);
    surface.flush();
  };
});

Other packages similar to canvaskit-wasm

pixi.js

PixiJS is a fast 2D rendering engine that uses WebGL and HTML5 Canvas. It is designed for creating interactive graphics and animations. Compared to canvaskit-wasm, PixiJS is more focused on game development and interactive applications, while canvaskit-wasm provides a more general-purpose 2D graphics API.

three

Three.js is a popular 3D graphics library that also supports 2D rendering. It uses WebGL to create complex 3D scenes and animations. While Three.js is primarily used for 3D graphics, it can also handle 2D graphics, making it a versatile alternative to canvaskit-wasm for projects that may require both 2D and 3D rendering.

p5

p5.js is a JavaScript library that makes coding accessible for artists, designers, educators, and beginners. It provides a simple interface for creating graphics and interactive content. Compared to canvaskit-wasm, p5.js is more beginner-friendly and is often used in educational contexts to teach programming and graphics.

README

A WASM version of Skia's Canvas API.

See https://skia.org/user/modules/canvaskit for more background information.

Getting Started

Browser

To use the library, run npm install canvaskit-wasm and then simply include it:

<script src="/node_modules/canvaskit-wasm/bin/canvaskit.js"></script>

CanvasKitInit({
    locateFile: (file) => '/node_modules/canvaskit-wasm/bin/'+file,
}).then((CanvasKit) => {
    // Code goes here using CanvasKit
});

As with all npm packages, there's a freely available CDN via unpkg.com:

<script src="https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.js"></script>

CanvasKitInit({
    locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@latest/bin/'+file,
}).then((CanvasKit) => {
    // Code goes here using CanvasKit
});

Node

To use CanvasKit in Node, it's similar to the browser:

const CanvasKitInit = require('canvaskit-wasm/bin/canvaskit.js');
CanvasKitInit({
    locateFile: (file) => __dirname + '/bin/'+file,
}).then((CanvasKit) => {
    // Code goes here using CanvasKit
});

WebPack

WebPack's support for WASM is still somewhat experimental, but CanvasKit can be used with a few configuration changes.

In the JS code, use require():

const CanvasKitInit = require('canvaskit-wasm/bin/canvaskit.js')
CanvasKitInit().then((CanvasKit) => {
    // Code goes here using CanvasKit
});

Since WebPack does not expose the entire /node_modules/ directory, but instead packages only the needed pieces, we have to copy canvaskit.wasm into the build directory. One such solution is to use CopyWebpackPlugin. For example, add the following plugin:

config.plugins.push(
    new CopyWebpackPlugin([
        { from: 'node_modules/canvaskit-wasm/bin/canvaskit.wasm' }
    ])
);

If webpack gives an error similar to:

ERROR in ./node_modules/canvaskit-wasm/bin/canvaskit.js
Module not found: Error: Can't resolve 'fs' in '...'

Then, add the following configuration change to the node section of the config:

config.node = {
    fs: 'empty'
};

Different canvaskit bundles

canvaskit-wasm includes 3 types of bundles:

• default ./bin/canvaskit.js - Basic canvaskit functionality

const InitCanvasKit = require('canvaskit-wasm/bin/canvaskit');

• full ./bin/full/canvaskit.js - includes Skottie and other libraries

const InitCanvasKit = require('canvaskit-wasm/bin/full/canvaskit');

• profiling ./bin/profiling/canvaskit.js - the same as full but contains full names of wasm functions called internally

const InitCanvasKit = require('canvaskit-wasm/bin/profiling/canvaskit');

ES6 import and node entrypoints

This package also exposes entrypoints

import InitCanvasKit from 'canvaskit-wasm'; // default

import InitCanvasKit from 'canvaskit-wasm/full';

import InitCanvasKit from 'canvaskit-wasm/profiling';

If you use typescript

you need to enable resolvePackageJsonExports in your tsconfig.json

{
    "compilerOptions": {
        "resolvePackageJsonExports": true
    }
}

Using the CanvasKit API

See example.html and node.example.js for demos of how to use the core API.

See extra.html for some optional add-ins like an animation player (Skottie).

See types/index.d.ts for a typescript definition file that contains all the APIs and some documentation about them.

Drop-in Canvas2D replacement

For environments where an HTML canvas is not available (e.g. Node, headless servers), CanvasKit has an optional API (included by default) that mostly mirrors the CanvasRenderingContext2D.

const skcanvas = CanvasKit.MakeCanvas(600, 600);

const ctx = skcanvas.getContext('2d');
const rgradient = ctx.createRadialGradient(200, 300, 10, 100, 100, 300);

// Add three color stops
rgradient.addColorStop(0, 'red');
rgradient.addColorStop(0.7, 'white');
rgradient.addColorStop(1, 'blue');

ctx.fillStyle = rgradient;
ctx.globalAlpha = 0.7;
ctx.fillRect(0, 0, 600, 600);

const imgData = skcanvas.toDataURL();
// imgData is now a base64 encoded image.

See more examples in example.html and node.example.js.

Known issues with Canvas2D Emulation layer

• measureText returns width only and does no shaping. It is only sort of valid with ASCII letters.
• textAlign is not supported.
• textBaseAlign is not supported.
• fillText does not support the width parameter.

Filing bugs

Please file bugs at https://skbug.com. It may be convenient to use our online fiddle to demonstrate any issues encountered.

See CONTRIBUTING.md for more information on sending pull requests.

Types and Documentation

There are Typescript types and associated API docs in types/.