003
md`# Karel - 003`
canvas = html`<canvas id="canvas" width="${width}", height="${height}"></canvas>`
DOM.download(() => new Promise(resolve => canvas.toBlob(resolve)))
context = canvas.getContext("2d")
import { colors } from '@kentonpowell/karel-001'
function rectangle(x, y, w, h, r = 0, color = '#000') {
// x = x - r / 2;
// y = y - r / 2;
if (w < 2 * r) r = w / 2;
if (h < 2 * r) r = h / 2;
context.beginPath();
context.moveTo(x + r, y);
context.arcTo(x + w, y, x + w, y + h, r);
context.arcTo(x + w, y + h, x, y + h, r);
context.arcTo(x, y + h, x, y, r);
context.arcTo(x, y, x + w, y, r);
context.closePath();
context.fillStyle = color;
context.fill();
}
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.
