Published
Edited
May 11, 2019
2 forks
1 star
Insert cell
md`# HTML5 Canvas Grid`
Insert cell
Insert cell
Insert cell
{
const h = 350,
w = 350,
margin = 10,
num = a,
c = DOM.context2d(w,h)
function drawGrid(){
c.lineWidth = 0.75
c.globalAlpha = 0.5
c.strokeRect(0,0,w,h)
c.translate(margin,margin)
c.beginPath()
for (let x = 0; x < num; x++){
c.moveTo(x * b, 0)
c.lineTo(x * b, w-(2*margin))
}
for (let y = 0; y < num; y++){
c.moveTo(0, y*b)
c.lineTo(h-(2*margin), y*b)
}
c.stroke()
}
drawGrid()
return c.canvas;
}
Insert cell
style = html`<style>
canvas{
background: #f9f9f9
}`
Insert cell
import {slider} from "@jashkenas/inputs"
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