[canvaskit] Get docs ready for npm release
Bug: skia:8584
Change-Id: I290f13e3e05af202f2ffd33f7d9b9361efa80e46
Reviewed-on: https://skia-review.googlesource.com/c/178270
Reviewed-by: Heather Miller <hcm@google.com>
diff --git a/experimental/canvaskit/CHANGELOG.md b/experimental/canvaskit/CHANGELOG.md
index 984d428..eb7de1b 100644
--- a/experimental/canvaskit/CHANGELOG.md
+++ b/experimental/canvaskit/CHANGELOG.md
@@ -6,6 +6,8 @@
## [Unreleased]
+## [0.3.0] - 2018-12-18
+
### Added
- Add Canvas2D JS layer. This mirrors the HTML Canvas API. This may be omitted at compile time
it by adding `no_canvas` to the `compile.sh` invocation.
@@ -17,7 +19,7 @@
- `SkPath.addRect` now correctly draws counter-clockwise vs clockwise.
### Changed
-- `CanvasKit.MakeImageShader` no longer takes encoded bytes, but an SkImage, created from
+- `CanvasKit.MakeImageShader` no longer takes encoded bytes, but an `SkImage`, created from
`CanvasKit.MakeImageFromEncoded`. Additionally, the optional parameters `clampIfUnpremul`
and `localMatrix` have been exposed.
- `SkPath.arcTo` now takes `startAngle`, `sweepAngle`, `forceMoveTo` as additional parameters.
@@ -29,6 +31,5 @@
- `CanvasKit.initFonts()` - no longer needed.
-
## [0.2.1] - 2018-11-20
Beginning of Changelog history
\ No newline at end of file
diff --git a/experimental/canvaskit/canvaskit/README.md b/experimental/canvaskit/canvaskit/README.md
index c56c038..23c2914 100644
--- a/experimental/canvaskit/canvaskit/README.md
+++ b/experimental/canvaskit/canvaskit/README.md
@@ -2,7 +2,105 @@
See https://skia.org/user/modules/canvaskit for more background information.
-See example.html for demos of how to use the API.
+# Getting Started
-Docs will be coming soon.
+## 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@0.3.0/bin/canvaskit.js"></script>
+ CanvasKitInit({
+ locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.3.0/bin/'+file,
+ }).then(...)
+
+## Node
+To use CanvasKit in Node, it's similar to the browser:
+
+ const CanvasKitInit = require('/node_modules/canvaskit-wasm/bin/canvaskit.js');
+ CanvasKitInit({
+ locateFile: (file) => __dirname + '/bin/'+file,
+ }).then((CanvasKit) => {
+ // Code goes here using CanvasKit
+ });
+
+With node, you also need to supply the `--expose-wasm` flag.
+
+## 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](https://github.com/webpack-contrib/copy-webpack-plugin).
+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'
+ };
+
+
+# Using the CanvasKit API
+
+See `example.html` and `node.example.js` for demos of how to use the API.
+
+More detailed docs will be coming soon.
+
+## 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 mirrors the HTML canvas.
+
+ let skcanvas = CanvasKit.MakeCanvas(600, 600);
+
+ let ctx = skcanvas.getContext('2d');
+ let 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);
+
+ let imgData = skcanvas.toDataURL();
+ // imgData is now a base64 encoded image.
+
+See more examples in `example.html` and `node.example.js`.
+
+
+# Filing bugs
+
+Please file bugs at [skbug.com].
+It may be convenient to use [jsfiddle.skia.org/canvaskit] to demonstrate any issues encountered.
+
+See CONTRIBUTING.md for more information on sending pull requests.
\ No newline at end of file
diff --git a/experimental/canvaskit/canvaskit/example.html b/experimental/canvaskit/canvaskit/example.html
index 9a79935..7c52982 100644
--- a/experimental/canvaskit/canvaskit/example.html
+++ b/experimental/canvaskit/canvaskit/example.html
@@ -751,7 +751,7 @@
for (let canvas of [skcanvas, realCanvas]) {
let ctx = canvas.getContext('2d');
- var rgradient = ctx.createRadialGradient(200, 300, 10, 100, 100, 300);
+ let rgradient = ctx.createRadialGradient(200, 300, 10, 100, 100, 300);
// Add three color stops
rgradient.addColorStop(0, 'red');
@@ -772,7 +772,7 @@
ctx.save();
ctx.clip();
- var lgradient = ctx.createLinearGradient(200, 20, 420, 40);
+ let lgradient = ctx.createLinearGradient(200, 20, 420, 40);
// Add three color stops
lgradient.addColorStop(0, 'green');
diff --git a/experimental/canvaskit/canvaskit/node.example.js b/experimental/canvaskit/canvaskit/node.example.js
index f507e57..63cc610 100644
--- a/experimental/canvaskit/canvaskit/node.example.js
+++ b/experimental/canvaskit/canvaskit/node.example.js
@@ -1,5 +1,3 @@
-console.log('hello world');
-
const CanvasKitInit = require('./bin/canvaskit.js');
const fs = require('fs');
const path = require('path');
@@ -12,8 +10,15 @@
let img = fs.readFileSync(path.join(__dirname, 'test.png'));
img = canvas.decodeImage(img);
+ let fontData = fs.readFileSync(path.join(__dirname, './Roboto-Regular.woff'));
+ canvas.loadFont(fontData, {
+ 'family': 'Roboto',
+ 'style': 'normal',
+ 'weight': '400',
+ });
+
let ctx = canvas.getContext('2d');
- ctx.font = '30px Impact'
+ ctx.font = '30px Roboto';
ctx.rotate(.1);
let text = ctx.measureText('Awesome');
ctx.fillText('Awesome ', 50, 100);
@@ -22,7 +27,7 @@
// Draw line under Awesome
ctx.strokeStyle = 'rgba(125,0,0,0.5)';
ctx.beginPath();
- ctx.lineWidth=6;
+ ctx.lineWidth = 6;
ctx.lineTo(50, 102);
ctx.lineTo(50 + text.width, 102);
ctx.stroke();
@@ -35,13 +40,11 @@
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 100, 150, 400, 350, 10, 200, 150, 100);
- // TODO load an image from file
console.log('<img src="' + canvas.toDataURL() + '" />');
});
+// Not currently called
function fancyAPI(CanvasKit) {
- console.log('loaded');
-
let surface = CanvasKit.MakeSurface(300, 300);
const canvas = surface.getCanvas();
@@ -88,6 +91,7 @@
let b64encoded = Buffer.from(pngBytes).toString('base64');
console.log(`<img src="data:image/png;base64,${b64encoded}" />`);
+ // These delete calls free up memeory in the C++ WASM memory block.
dpe.delete();
skpath.delete();
textPaint.delete();
diff --git a/experimental/canvaskit/canvaskit/package.json b/experimental/canvaskit/canvaskit/package.json
index 50de14a..44ca1c5 100644
--- a/experimental/canvaskit/canvaskit/package.json
+++ b/experimental/canvaskit/canvaskit/package.json
@@ -1,6 +1,6 @@
{
"name": "canvaskit-wasm",
- "version": "0.2.1",
+ "version": "0.3.0",
"description": "A WASM version of Skia's Canvas API",
"main": "bin/canvaskit.js",
"homepage": "https://github.com/google/skia/tree/master/experimental/canvaskit",
diff --git a/experimental/canvaskit/package.json b/experimental/canvaskit/package.json
index 3a0a862..33a4a86 100644
--- a/experimental/canvaskit/package.json
+++ b/experimental/canvaskit/package.json
@@ -14,8 +14,8 @@
"requirejs": "~2.3.5"
},
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "make test-continuous"
},
"author": "",
- "license": "ISC"
+ "license": "BSD-3-Clause"
}