A WASM version of Skia's Canvas API
A WASM version of Skia's Canvas API.
See https://skia.org/user/modules/canvaskit for more background information.
To use the library, run npm install canvaskit-wasm and then simply include it:
``html``javascript`
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:
`html``javascript`
CanvasKitInit({
locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@latest/bin/'+file,
}).then((CanvasKit) => {
// Code goes here using CanvasKit
});
`javascript`
const CanvasKitInit = require('canvaskit-wasm/bin/canvaskit.js');
CanvasKitInit({
locateFile: (file) => __dirname + '/bin/'+file,
}).then((CanvasKit) => {
// Code goes here using CanvasKit
});
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():
`javascript`
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:
`javascript`
config.plugins.push(
new CopyWebpackPlugin([
{ from: 'node_modules/canvaskit-wasm/bin/canvaskit.wasm' }
])
);
If webpack gives an error similar to:
`warn`
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:
`javascript`
config.node = {
fs: 'empty'
};
canvaskit-wasm includes 3 types of bundles:
* default ./bin/canvaskit.js - Basic canvaskit functionality
`javascript`
const InitCanvasKit = require('canvaskit-wasm/bin/canvaskit');
* full ./bin/full/canvaskit.js - includes Skottie and other libraries
`javascript`
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
`javascript`
const InitCanvasKit = require('canvaskit-wasm/bin/profiling/canvaskit');
This package also exposes entrypoints
`javascript`
import InitCanvasKit from 'canvaskit-wasm'; // default
`javascript`
import InitCanvasKit from 'canvaskit-wasm/full';
`javascript`
import InitCanvasKit from 'canvaskit-wasm/profiling';
If you use typescript
you need to enable resolvePackageJsonExports in your tsconfig.json
`json`
{
"compilerOptions": {
"resolvePackageJsonExports": true
}
}
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.
`javascript
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`.
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.
There are Typescript types and associated API docs in types/.