Public
Edited
Apr 10, 2023
{
const canvas = html`<canvas width = 500 height = 500 style = "border:1px solid black;"/>`
const ctx = canvas.getContext("2d")
ctx.fillStyle = "steelblue"
ctx.strokeStyle = "red"
ctx.beginPath()
ctx.arc(250,250,20,0,Math.PI)
ctx.fill()
ctx.stroke()
ctx.closePath()
return canvas
}
{
const canvas = html`<canvas width = 500 height = 500 style = "border:1px solid black;"/>`
const ctx = canvas.getContext("2d")
ctx.fillStyle = "steelblue"
ctx.strokeStyle = "red"
ctx.beginPath()
ctx.rect(250,250,100,200)
ctx.fill()
ctx.stroke()
ctx.closePath()
return canvas
}
{
const canvas = html`<canvas width = 500 height = 500 style = "border:1px solid black;"/>`
const ctx = canvas.getContext("2d")
ctx.fillStyle = "steelblue"
ctx.strokeStyle = "red"
ctx.beginPath()
ctx.moveTo(100,100)
ctx.lineTo(250,250)
ctx.fill()
ctx.stroke()
ctx.closePath()
return canvas
}
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.
