Published
Edited
Apr 30, 2021
1 star
Insert cell
md`# Hello context2d`
Insert cell
{
const width = 500
const ctx = DOM.context2d(width, width)

let x = width/2
let y = width/2
while (true){
ctx.fillStyle = "#ffffff66"
ctx.fillRect(0,0,width,width)
ctx.fillStyle = "hsl(0,0%,90%)"

ctx.beginPath()
ctx.arc(x,y,2,0,Math.PI * 2)
ctx.fillStyle = "black"
ctx.fill()
x += 5 * 2 * (Math.random() - 0.5)
if (x > width) x = 0
if (x < 0) x = width

y += 5 * 2 * (Math.random() - 0.5)
if (y > width) y = 0
if (y < 0) y = width
yield ctx.canvas
}
}
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