Published
Edited
Aug 18, 2019
2 stars
canvas = {
const width = 960
const height = 600
const padding = 20
const aspectRatio = 1/1.681 // height:width
const ctx = DOM.context2d(width, height)
var bg = new Image() // Image constructor
bg.src = pattern + texselect
bg.alt = 'paper texture'
bg.onload = function() {
var texture = ctx.createPattern(bg, 'repeat')
ctx.fillStyle = texture
ctx.fillRect(padding, padding, (width - (2*padding)), (height - (2*padding)))
}
// ctx.shadowBlur=5;
// ctx.shadowColor='#eee';
// ctx.shadowOffsetX=5;
// ctx.shadowOffsetY=5;
ctx.fillStyle = bgcol
ctx.fillRect(padding, padding, (width - (2*padding)), (height - (2*padding)))
ctx.rect(padding, padding, (width - (2*padding)), (height - (2*padding)))
ctx.stroke()
yield ctx.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.
