2d:null 2e:["$","title",null,{"children":"CanvasKit Editor | AbserAri | Observable"}] 33:T580,html`

${createCodeMirrorWidget({ width: width / 2, height: Global.WorkspaceHeight, oninput: (inst, obj) => {} })}

`34:T400,(window.buildParagraphCodeStr = `const loadFont = fetch('https://storage.googleapis.com/skia-cdn/misc/Roboto-Regular.ttf') .then((response) => response.arrayBuffer()); Promise.all([loadFont]).then(([robotoData]) => { const surface = CanvasKit.MakeCanvasSurface("execution"); surface.flush(); const canvas = surface.getCanvas(); canvas.clear(CanvasKit.Color4f(0.9, 0.9, 0.9, 1.0)); const fontMgr = CanvasKit.FontMgr.FromData([robotoData]); const paraStyle = new CanvasKit.ParagraphStyle({ textStyle: { color: CanvasKit.BLACK, fontFamilies: ['Roboto'], fontSize: 28, }, textAlign: CanvasKit.TextAlign.Left, }); const text = 'Any sufficiently entrenched technology is indistinguishable from Javascript'; const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr); builder.addText(text); const paragraph = builder.build(); paragraph.layout(290); // width in pixels to use when wrapping text canvas.drawParagraph(paragraph, 10, 10); surface.flush(); });`)35:T980,foxFontCode = `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; });`36:T45b,(window.AnimationSample = ` const surface = CanvasKit.MakeCanvasSurface(canvas.id); 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);`)37:T66f,StarPath = `const surface = CanvasKit.MakeCanvasSurface(canvas.id); if (!surface) { throw 'Could not make surface'; } const skcanvas = surface.getCanvas(); const paint = new CanvasKit.Paint(); const textPaint = new CanvasKit.Paint(); textPaint.setColor(CanvasKit.Color(100, 0, 0, 1.0)); textPaint.setAntiAlias(true); const textFont = new CanvasKit.Font(null, 30); let offset = 0; let X = 250; let Y = 250; const context = CanvasKit.currentContext(); function drawFrame() { // If there are multiple contexts on the screen, we need to make sure // we switch to this one before we draw. CanvasKit.setCurrentContext(context); const path = starPath(CanvasKit, X, Y); const dpe = CanvasKit.PathEffect.MakeDash([15, 5, 5, 10], offset/5); offset++; paint.setPathEffect(dpe); paint.setStyle(CanvasKit.PaintStyle.Stroke); paint.setStrokeWidth(5.0 + -3 * Math.cos(offset/30)); paint.setAntiAlias(true); paint.setColor(CanvasKit.Color(66, 129, 164, 1.0)); skcanvas.clear(CanvasKit.Color(255, 255, 255, 1.0)); skcanvas.drawPath(path, paint); skcanvas.drawText('Try Clicking!', 10, 425, textPaint, textFont); skcanvas.flush(); dpe.delete(); path.delete(); requestAnimationFrame(drawFrame); } requestAnimationFrame(drawFrame); function starPath(CanvasKit, X, Y, R=128) { 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; } // Make animation interactive canvas.addEventListener('pointermove', (e) => { if (!e.pressure) { return; } X = e.offsetX; Y = e.offsetY; });`38:T528,DrawCodeStr = `const surface = CanvasKit.MakeCanvasSurface(canvas.id); if (!surface) { throw 'Could not make surface'; } const skcanvas = surface.getCanvas(); const paint = new CanvasKit.Paint(); // If there are multiple contexts on the screen, we need to make sure // we switch to this one before we draw. const prog = \` uniform float rad_scale; uniform float2 in_center; uniform float4 in_colors0; uniform float4 in_colors1; half4 main(float2 p) { float2 pp = p - in_center; float radius = sqrt(dot(pp, pp)); radius = sqrt(radius); float angle = atan(pp.y / pp.x); float t = (angle + 3.1415926/2) / (3.1415926); t += radius * rad_scale; t = fract(t); return half4(mix(in_colors0, in_colors1, t)); } \`; const context = CanvasKit.currentContext(); const fact = CanvasKit.RuntimeEffect.Make(prog); function drawFrame() { CanvasKit.setCurrentContext(context); skcanvas.clear(CanvasKit.WHITE); const shader = fact.makeShader( [Math.sin(Date.now() / 2000) / 5, 256, 256, 1, 0, 0, 1, 0, 1, 0, 1], true /*=opaque*/ ); paint.setShader(shader); skcanvas.drawRect(CanvasKit.LTRBRect(0, 0, 512, 512), paint); surface.flush(); requestAnimationFrame(drawFrame); shader.delete(); } requestAnimationFrame(drawFrame);`39:[] 31:{"id":"3c31177eddd2f5a4","slug":"canvaskit-editor","title":"CanvasKit Editor","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2021-03-20T03:18:47.653Z","update_time":"$D2021-03-21T04:09:49.314Z","view_time":null,"first_public_time":"$D2021-03-20T05:34:26.776Z","has_unpublished_edits":null,"fork":{"id":"1ac638c1fad1d1b2","slug":"canvaskit-editor","title":"CanvasKit Editor","owner":{"id":"2a278c3908e45a90","login":"fengyfei","name":"Feng Yifei"}},"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":250,"publish_version":250,"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":"CanvasKit Editor","cells":[{"id":0,"value":"html`

CanvasKit Editor

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

WorkSpace

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"html`\n

Configuration

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

Constants

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"Global = {\n return {\n ToolBarHeight: 42,\n Height: 540,\n WorkspaceHeight: 510\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"html`\n

Executor

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function executor(code) {\n window.CanvasKit = CanvasKit;\n var self = document.getElementById('execution');\n var parent = self.parentElement;\n var removed = parent.removeChild(self);\n\n var canvas = html`

`;\n parent.appendChild(canvas);\n\n eval(`${code}`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"html`\n

Setup Toolbar

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function setupToolbar() {\n const initial = foxFontCode;\n\n const toolbarLoadCode = document.querySelector(\"#toolbar_load_code\");\n const toolbarRunCode = document.querySelector(\"#toolbar_run_code\");\n\n toolbarLoadCode.disabled = false;\n // Toolbar onclick Handles\n toolbarLoadCode.onclick = () => {\n if (window.editor) {\n window.editor.setValue(initial);\n }\n };\n\n toolbarRunCode.onclick = () => {\n if (window.editor) {\n executor(window.editor.getValue());\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"html`\n

Start

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function initialize() {\n setTimeout(setupToolbar, 3000);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"initialize()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"paint = new CanvasKit.Paint()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"html`\n

Imports

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

Bulma CSS

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"import { createCodeMirrorWidget } from '@fengyfei/blockly-widgets'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import { loadCanvasKit } from '@yhyddr/canvaskit-library'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"CanvasKit = loadCanvasKit(\"0.19.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"(window.SmallSample = `const surface = CanvasKit.MakeCanvasSurface(canvas.id);\n\n const paint = new CanvasKit.Paint();\n paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));\n paint.setStyle(CanvasKit.PaintStyle.Stroke);\n paint.setAntiAlias(true);\n const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);\n\n function draw(canvas) {\n canvas.clear(CanvasKit.WHITE);\n canvas.drawRRect(rr, paint);\n }\n surface.drawOnce(draw);`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"