2c:null 2d:["$","title",null,{"children":"Skia | AbserAri | Observable"}] 32:Ta82,{ let canvas = html`

`; let robotoData = null; fetch( 'https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Regular.ttf' ).then(resp => { resp.arrayBuffer().then(buffer => { robotoData = buffer; requestAnimationFrame(drawFrame); }); }); let emojiData = null; fetch('https://storage.googleapis.com/skia-cdn/misc/NotoColorEmoji.ttf').then( resp => { resp.arrayBuffer().then(buffer => { emojiData = buffer; requestAnimationFrame(drawFrame); }); } ); const surface = CanvasKit.MakeCanvasSurface(canvas.id); if (!surface) { throw 'Could not make surface'; } const skcanvas = surface.getCanvas(); const font = new CanvasKit.Font(null, 18); const fontPaint = new CanvasKit.Paint(); fontPaint.setStyle(CanvasKit.PaintStyle.Fill); fontPaint.setAntiAlias(true); skcanvas.drawText(`Fetching Font data...`, 5, 450, fontPaint, font); surface.flush(); const context = CanvasKit.currentContext(); let paragraph = null; let X = 250; let Y = 250; const str = 'The quick brown fox 🦊 ate a zesty hamburgerfons 🍔.\nThe 👩‍👩‍👧‍👧 laughed.'; function drawFrame() { if (robotoData && emojiData && !paragraph) { const fontMgr = CanvasKit.FontMgr.FromData([robotoData, emojiData]); const paraStyle = new CanvasKit.ParagraphStyle({ textStyle: { color: CanvasKit.BLACK, fontFamilies: ['Roboto', 'Noto Color Emoji'], fontSize: 50 }, textAlign: CanvasKit.TextAlign.Left, maxLines: 7, ellipsis: '...' }); const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr); builder.addText(str); paragraph = builder.build(); } if (!paragraph) { requestAnimationFrame(drawFrame); return; } CanvasKit.setCurrentContext(context); skcanvas.clear(CanvasKit.WHITE); let wrapTo = 350 + 150 * Math.sin(Date.now() / 2000); paragraph.layout(wrapTo); skcanvas.drawParagraph(paragraph, 0, 0); skcanvas.drawLine(wrapTo, 0, wrapTo, 400, fontPaint); const posA = paragraph.getGlyphPositionAtCoordinate(X, Y); const cp = str.codePointAt(posA.pos); if (cp) { const glyph = String.fromCodePoint(cp); skcanvas.drawText( `At (${X.toFixed(2)}, ${Y.toFixed(2)}) glyph is '${glyph}'`, 5, 450, fontPaint, font ); } surface.flush(); requestAnimationFrame(drawFrame); } // Make animation interactive canvas.addEventListener('mousemove', e => { X = e.offsetX - 10; Y = e.offsetY; }); }33:T4da,{ function SkottieExample(CanvasKit, jsonStr) { if (!CanvasKit || !jsonStr) { return; } const animation = CanvasKit.Animation(jsonStr); const duration = animation.duration() * 1000; const bounds = CanvasKit.LTRBRect(0, 0, 500, 500); const surface = CanvasKit.MakeCanvasSurface(canvasAnimate.id); if (!surface) { console.log('Could not make surface'); return; } const context = CanvasKit.currentContext(); const skcanvas = surface.getCanvas(); let firstFrame = new Date().getTime(); function drawFrame() { // settingCurrentContext required if there are multiple contexts // on the same page. CanvasKit.setCurrentContext(context); let now = new Date().getTime(); let seek = ((now - firstFrame) / duration) % 1.0; animation.seek(seek); animation.render(skcanvas, bounds); skcanvas.flush(); requestAnimationFrame(drawFrame); } requestAnimationFrame(drawFrame); } // CanvasKit and canvas are provided in this scope. fetch('https://storage.googleapis.com/skia-cdn/misc/drinks.json').then( resp => { resp.text().then(jsonStr => { SkottieExample(CanvasKit, jsonStr); }); } ); }34:T47d,drawPractice2 = CanvasKit => { const surface = CanvasKit.MakeCanvasSurface('foo2'); const paint = new CanvasKit.Paint(); paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0)); paint.setStyle(CanvasKit.PaintStyle.Stroke); paint.setAntiAlias(true); // const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15); const w = 100; // size of rect const h = 60; let x = 10; // initial position of top left corner. let y = 60; let dirX = 1; // box is always moving at a constant speed in one of the four diagonal directions let dirY = 1; function drawFrame(canvas) { // boundary check if (x < 0 || x + w > 300) { dirX *= -1; // reverse x direction when hitting side walls } if (y < 0 || y + h > 300) { dirY *= -1; // reverse y direction when hitting top and bottom walls } // move x += dirX; y += dirY; canvas.clear(CanvasKit.WHITE); const rr = CanvasKit.RRectXY( CanvasKit.LTRBRect(x, y, x + w, y + h), 25, 15 ); canvas.drawRRect(rr, paint); surface.requestAnimationFrame(drawFrame); } surface.requestAnimationFrame(drawFrame); }35:[] 30:{"id":"4d81a543f51711a3","slug":"skia","title":"Skia","thumbnail":"d3e8cd37ba9d0617038bea914a53a7a8738db5c63df4b23758391d4467db725b","access_level":"public","create_time":"$D2021-03-19T08:11:46.173Z","update_time":"$D2021-03-20T10:16:44.172Z","view_time":null,"first_public_time":"$D2021-03-19T08:18:05.711Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8c968b856895152e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":"starter_2024"},"version":195,"publish_version":195,"role":null,"authored":false,"authors":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null}],"members":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Skia","cells":[{"id":0,"value":"md`# Skia`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"canvas = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"canvasAnimate = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"imgData = {\n let skcanvas = CanvasKit.MakeCanvas(600, 600);\n\n let ctx = skcanvas.getContext('2d');\n let rgradient = ctx.createRadialGradient(200, 300, 10, 100, 100, 300);\n\n // Add three color stops\n rgradient.addColorStop(0, 'red');\n rgradient.addColorStop(0.7, 'white');\n rgradient.addColorStop(1, 'blue');\n\n ctx.fillStyle = rgradient;\n ctx.globalAlpha = 0.7;\n ctx.fillRect(0, 0, 600, 600);\n\n let imgData = skcanvas.toDataURL();\n return imgData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"{\n drawPractice(CanvasKit);\n drawPractice2(CanvasKit);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"drawPractice = kit => {\n const surface = kit.MakeCanvasSurface('foo');\n\n const paint = new kit.Paint();\n paint.setColor(kit.Color4f(0.9, 0, 0, 1.0));\n paint.setStyle(kit.PaintStyle.Stroke);\n paint.setAntiAlias(true);\n const rr = kit.RRectXY(kit.LTRBRect(10, 60, 210, 260), 25, 15);\n\n function draw(canvas) {\n canvas.clear(kit.WHITE);\n canvas.drawRRect(rr, paint);\n }\n surface.drawOnce(draw);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"canvasKitVersion = '0.25.0'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"CanvasKitInit = require('https://unpkg.com/canvaskit-wasm@' +\n canvasKitVersion +\n '/bin/canvaskit.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"CanvasKit = CanvasKitInit({\n locateFile: file =>\n 'https://unpkg.com/canvaskit-wasm@' + canvasKitVersion + '/bin/' + file\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"html`