• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1A WASM version of Skia's Canvas API.
2
3See https://skia.org/user/modules/canvaskit for more background information.
4
5# Getting Started
6
7## Browser
8To use the library, run `npm install canvaskit-wasm` and then simply include it:
9
10    <script src="/node_modules/canvaskit-wasm/bin/canvaskit.js"></script>
11    CanvasKitInit({
12        locateFile: (file) => '/node_modules/canvaskit-wasm/bin/'+file,
13    }).then((CanvasKit) => {
14        // Code goes here using CanvasKit
15    });
16
17As with all npm packages, there's a freely available CDN via unpkg.com:
18
19    <script src="https://unpkg.com/canvaskit-wasm@0.18.1/bin/canvaskit.js"></script>
20    CanvasKitInit({
21         locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.18.1/bin/'+file,
22    }).then(...)
23
24## Node
25To use CanvasKit in Node, it's similar to the browser:
26
27    const CanvasKitInit = require('/node_modules/canvaskit-wasm/bin/canvaskit.js');
28    CanvasKitInit({
29        locateFile: (file) => __dirname + '/bin/'+file,
30    }).then((CanvasKit) => {
31        // Code goes here using CanvasKit
32    });
33
34With node, you also need to supply the `--expose-wasm` flag.
35
36## WebPack
37
38WebPack's support for WASM is still somewhat experimental, but CanvasKit can be
39used with a few configuration changes.
40
41In the JS code, use require():
42
43    const CanvasKitInit = require('canvaskit-wasm/bin/canvaskit.js')
44    CanvasKitInit().then((CanvasKit) => {
45        // Code goes here using CanvasKit
46    });
47
48Since WebPack does not expose the entire `/node_modules/` directory, but instead
49packages only the needed pieces, we have to copy canvaskit.wasm into the build directory.
50One such solution is to use [CopyWebpackPlugin](https://github.com/webpack-contrib/copy-webpack-plugin).
51For example, add the following plugin:
52
53    config.plugins.push(
54        new CopyWebpackPlugin([
55            { from: 'node_modules/canvaskit-wasm/bin/canvaskit.wasm' }
56        ])
57    );
58
59If webpack gives an error similar to:
60
61    ERROR in ./node_modules/canvaskit-wasm/bin/canvaskit.js
62    Module not found: Error: Can't resolve 'fs' in '...'
63
64Then, add the following configuration change to the node section of the config:
65
66    config.node = {
67        fs: 'empty'
68    };
69
70
71# Using the CanvasKit API
72
73See `example.html` and `node.example.js` for demos of how to use the core API.
74
75See `extra.html` for some optional add-ins like an animation player (Skottie)
76and a particles system.
77
78See `types/index.d.ts` for a typescript definition file that contains all the
79APIs and some documentation about them.
80
81## Drop-in Canvas2D replacement
82For environments where an HTML canvas is not available (e.g. Node, headless servers),
83CanvasKit has an optional API (included by default) that mirrors the HTML canvas.
84
85    let skcanvas = CanvasKit.MakeCanvas(600, 600);
86
87    let ctx = skcanvas.getContext('2d');
88    let rgradient = ctx.createRadialGradient(200, 300, 10, 100, 100, 300);
89
90    // Add three color stops
91    rgradient.addColorStop(0, 'red');
92    rgradient.addColorStop(0.7, 'white');
93    rgradient.addColorStop(1, 'blue');
94
95    ctx.fillStyle = rgradient;
96    ctx.globalAlpha = 0.7;
97    ctx.fillRect(0, 0, 600, 600);
98
99    let imgData = skcanvas.toDataURL();
100    // imgData is now a base64 encoded image.
101
102See more examples in `example.html` and `node.example.js`.
103
104
105# Filing bugs
106
107Please file bugs at [skbug.com](skbug.com).
108It may be convenient to use [our online fiddle](jsfiddle.skia.org/canvaskit) to demonstrate any issues encountered.
109
110See CONTRIBUTING.md for more information on sending pull requests.
111
112# Types and Documentation
113
114There are Typescript types and associated API docs in types/.
115