Published
Edited
Nov 23, 2020
2 stars
Insert cell
Insert cell
{
const ctx = DOM.context2d(width, height);

ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.stroke();

ctx.beginPath();
ctx.arc(200, 100, 30, 0, 2 * Math.PI);
ctx.stroke();

ctx.font = "36px Consolas";
ctx.fillText("Hola, como estas 😃", 150, 200);

ctx.fillRect(100, 200, 50, 50);

const grd = ctx.createLinearGradient(125, 225, 125, 225 + 150);
grd.addColorStop(0, "lightblue");
grd.addColorStop(1, "orange");
ctx.fillStyle = grd;
ctx.fillRect(125, 225, 150, 150);

ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.arc(400, 100, 30, angle / 2, 2 * Math.PI - angle / 2);
ctx.lineTo(400, 100);
ctx.closePath();
ctx.fill();
ctx.stroke();

return ctx.canvas;
}
Insert cell
Insert cell
angle = {
let angle = 0;
let da = 0.1;
for (;;) {
angle += da;
if (angle <= 0 || angle >= 2) {
da *= -1;
}
yield angle;
}
}
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