const CanvasKitInit = require('./bin/canvaskit.js'); const fs = require('fs'); const path = require('path'); CanvasKitInit({ locateFile: (file) => __dirname + '/bin/'+file, }).then((CanvasKit) => { let canvas = CanvasKit.MakeCanvas(300, 300); 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 Roboto'; ctx.rotate(.1); ctx.fillText('Awesome ', 50, 100); ctx.strokeText('Groovy!', 250, 100); // Draw line under Awesome ctx.strokeStyle = 'rgba(125,0,0,0.5)'; ctx.beginPath(); ctx.lineWidth = 6; ctx.lineTo(50, 102); ctx.lineTo(250, 102); ctx.stroke(); // squished vertically ctx.globalAlpha = 0.7 ctx.imageSmoothingQuality = 'medium'; ctx.drawImage(img, 150, 150, 150, 100); ctx.rotate(-.2); ctx.imageSmoothingEnabled = false; ctx.drawImage(img, 100, 150, 400, 350, 10, 200, 150, 100); console.log(''); fancyAPI(CanvasKit); }); function fancyAPI(CanvasKit) { let surface = CanvasKit.MakeSurface(300, 300); const canvas = surface.getCanvas(); const paint = new CanvasKit.Paint(); const fontMgr = CanvasKit.FontMgr.RefDefault(); let robotoData = fs.readFileSync(path.join(__dirname, './Roboto-Regular.woff')); const roboto = fontMgr.MakeTypefaceFromData(robotoData); const textPaint = new CanvasKit.Paint(); textPaint.setColor(CanvasKit.Color(40, 0, 0)); textPaint.setAntiAlias(true); const textFont = new CanvasKit.Font(roboto, 30); const skpath = starPath(CanvasKit); const dpe = CanvasKit.PathEffect.MakeDash([15, 5, 5, 10], 1); paint.setPathEffect(dpe); paint.setStyle(CanvasKit.PaintStyle.Stroke); paint.setStrokeWidth(5.0); paint.setAntiAlias(true); paint.setColor(CanvasKit.Color(66, 129, 164, 1.0)); canvas.clear(CanvasKit.Color(255, 255, 255, 1.0)); canvas.drawPath(skpath, paint); canvas.drawText('Try Clicking!', 10, 280, textPaint, textFont); surface.flush(); const img = surface.makeImageSnapshot(); if (!img) { console.error('no snapshot'); return; } const pngBytes = img.encodeToBytes(); if (!pngBytes) { console.error('encoding failure'); return } // See https://stackoverflow.com/a/12713326 let b64encoded = Buffer.from(pngBytes).toString('base64'); console.log(``); // These delete calls free up memeory in the C++ WASM memory block. dpe.delete(); skpath.delete(); textPaint.delete(); paint.delete(); roboto.delete(); textFont.delete(); surface.dispose(); } function starPath(CanvasKit, X=128, Y=128, R=116) { let p = new CanvasKit.Path(); p.moveTo(X + R, Y); for (let i = 1; i < 8; i++) { let a = 2.6927937 * i; p.lineTo(X + R * Math.cos(a), Y + R * Math.sin(a)); } return p; }