canvas = {
const ctx = DOM.context2d(width, height);
ctx.fillStyle = "hsl(216deg 100% 13%)";
ctx.fillRect(0, 0, width, height);
ctx.canvas.style.background = "hsl(216deg 20% 90%)";
ctx.beginPath();
ctx.strokeStyle = "white";
ctx.translate(500, 0);
const shape = [
{ draw: "moveTo", args: [0, 0] },
{ draw: "lineTo", args: [0, 30] },
{ draw: "bezierCurveTo", args: [100, 70, 150, 120, 120, 180] },
{ draw: "lineTo", args: [120, 180] },
{ draw: "bezierCurveTo", args: [100, 220, 150, 280, 140, 350] },
{ draw: "lineTo", args: [120, 400] },
{ draw: "lineTo", args: [0, 480] },
{ draw: "lineTo", args: [0, 500] },
{ draw: "lineTo", args: [200, 500] },
{ draw: "lineTo", args: [200, 0] },
{ draw: "lineTo", args: [0, 0] }
];
shape.forEach((d) => ctx[d.draw](...d.args));
ctx.stroke();
for (let i = 0; i < shape.length; ++i) {
const d = shape[i];
if (d.args.length > 2) {
ctx.beginPath();
ctx.fillStyle = "cyan";
ctx.arc(d.args[0], d.args[1], 4, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(d.args[2], d.args[3], 4, 0, Math.PI * 2);
ctx.fill();
}
}
return ctx.canvas;
}
height = 600
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.
