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