Published
Edited
Mar 20, 2021
Insert cell
md`# Skia`
Insert cell
canvas = html`<canvas id=str width=450px height=300></canvas>`
Insert cell
Insert cell
Insert cell
Insert cell
html`<img src=${imgData}>`
Insert cell
imgData = {
let skcanvas = CanvasKit.MakeCanvas(600, 600);

let ctx = skcanvas.getContext('2d');
let rgradient = ctx.createRadialGradient(200, 300, 10, 100, 100, 300);

// Add three color stops
rgradient.addColorStop(0, 'red');
rgradient.addColorStop(0.7, 'white');
rgradient.addColorStop(1, 'blue');

ctx.fillStyle = rgradient;
ctx.globalAlpha = 0.7;
ctx.fillRect(0, 0, 600, 600);

let imgData = skcanvas.toDataURL();
return imgData;
}
Insert cell
html`<canvas id=foo width=300 height=300></canvas>`
Insert cell
html`<canvas id=foo2 width=300 height=300></canvas>`
Insert cell
{
drawPractice(CanvasKit);
drawPractice2(CanvasKit);
}
Insert cell
drawPractice = kit => {
const surface = kit.MakeCanvasSurface('foo');

const paint = new kit.Paint();
paint.setColor(kit.Color4f(0.9, 0, 0, 1.0));
paint.setStyle(kit.PaintStyle.Stroke);
paint.setAntiAlias(true);
const rr = kit.RRectXY(kit.LTRBRect(10, 60, 210, 260), 25, 15);

function draw(canvas) {
canvas.clear(kit.WHITE);
canvas.drawRRect(rr, paint);
}
surface.drawOnce(draw);
}
Insert cell
Insert cell
canvasKitVersion = '0.25.0'
Insert cell
Insert cell
CanvasKit = CanvasKitInit({
locateFile: file =>
'https://unpkg.com/canvaskit-wasm@' + canvasKitVersion + '/bin/' + file
})
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more