• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1const CanvasKitInit = require('./bin/canvaskit.js');
2const fs = require('fs');
3const path = require('path');
4
5CanvasKitInit({
6  locateFile: (file) => __dirname + '/bin/'+file,
7}).ready().then((CanvasKit) => {
8  let canvas = CanvasKit.MakeCanvas(300, 300);
9
10  let img = fs.readFileSync(path.join(__dirname, 'test.png'));
11  img = canvas.decodeImage(img);
12
13  let fontData = fs.readFileSync(path.join(__dirname, './Roboto-Regular.woff'));
14  canvas.loadFont(fontData, {
15                                'family': 'Roboto',
16                                'style': 'normal',
17                                'weight': '400',
18                              });
19
20  let ctx = canvas.getContext('2d');
21  ctx.font = '30px Roboto';
22  ctx.rotate(.1);
23  let text = ctx.measureText('Awesome');
24  ctx.fillText('Awesome ', 50, 100);
25  ctx.strokeText('Groovy!', 60+text.width, 100);
26
27  // Draw line under Awesome
28  ctx.strokeStyle = 'rgba(125,0,0,0.5)';
29  ctx.beginPath();
30  ctx.lineWidth = 6;
31  ctx.lineTo(50, 102);
32  ctx.lineTo(50 + text.width, 102);
33  ctx.stroke();
34
35  // squished vertically
36  ctx.globalAlpha = 0.7
37  ctx.imageSmoothingQuality = 'medium';
38  ctx.drawImage(img, 150, 150, 150, 100);
39  ctx.rotate(-.2);
40  ctx.imageSmoothingEnabled = false;
41  ctx.drawImage(img, 100, 150, 400, 350, 10, 200, 150, 100);
42
43  console.log('<img src="' + canvas.toDataURL() + '" />');
44
45  fancyAPI(CanvasKit);
46});
47
48function fancyAPI(CanvasKit) {
49  let surface = CanvasKit.MakeSurface(300, 300);
50  const canvas = surface.getCanvas();
51
52  const paint = new CanvasKit.SkPaint();
53
54  const fontMgr = CanvasKit.SkFontMgr.RefDefault();
55  let robotoData = fs.readFileSync(path.join(__dirname, './Roboto-Regular.woff'));
56  const roboto = fontMgr.MakeTypefaceFromData(robotoData);
57
58  const textPaint = new CanvasKit.SkPaint();
59  textPaint.setColor(CanvasKit.Color(40, 0, 0));
60  textPaint.setAntiAlias(true);
61
62  const textFont = new CanvasKit.SkFont(roboto, 30);
63
64  const skpath = starPath(CanvasKit);
65  const dpe = CanvasKit.MakeSkDashPathEffect([15, 5, 5, 10], 1);
66
67  paint.setPathEffect(dpe);
68  paint.setStyle(CanvasKit.PaintStyle.Stroke);
69  paint.setStrokeWidth(5.0);
70  paint.setAntiAlias(true);
71  paint.setColor(CanvasKit.Color(66, 129, 164, 1.0));
72
73  canvas.clear(CanvasKit.Color(255, 255, 255, 1.0));
74
75  canvas.drawPath(skpath, paint);
76  canvas.drawText('Try Clicking!', 10, 280, textPaint, textFont);
77
78  surface.flush();
79
80  const img = surface.makeImageSnapshot()
81  if (!img) {
82    console.error('no snapshot');
83    return;
84  }
85  const png = img.encodeToData()
86  if (!png) {
87    console.error('encoding failure');
88    return
89  }
90  const pngBytes = CanvasKit.getSkDataBytes(png);
91  // See https://stackoverflow.com/a/12713326
92  let b64encoded = Buffer.from(pngBytes).toString('base64');
93  console.log(`<img src="data:image/png;base64,${b64encoded}" />`);
94
95  // These delete calls free up memeory in the C++ WASM memory block.
96  dpe.delete();
97  skpath.delete();
98  textPaint.delete();
99  paint.delete();
100  roboto.delete();
101  textFont.delete();
102
103  surface.dispose();
104}
105
106function starPath(CanvasKit, X=128, Y=128, R=116) {
107  let p = new CanvasKit.SkPath();
108  p.moveTo(X + R, Y);
109  for (let i = 1; i < 8; i++) {
110    let a = 2.6927937 * i;
111    p.lineTo(X + R * Math.cos(a), Y + R * Math.sin(a));
112  }
113  return p;
114}