canvas = {
const ctx = DOM.context2d(width, height);
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, width, height);
var grainLevel = 220;
const gradient = ctx.createRadialGradient(
width / 2,
height,
height / 4,
width / 2,
height,
height * 2
);
// Add three color stops
gradient.addColorStop(0, "white");
gradient.addColorStop(0.2, "white");
gradient.addColorStop(1, "gray");
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
const buffer = ctx.getImageData(0, 0, width * 2, height * 2);
for (let y = 0, i = 0; y < height * 2; ++y) {
for (let x = 0; x < width * 2; ++x, i += 4) {
//buffer.data[i + 0] += Math.round(grainLevel * (Math.random() - 0.5)); //255 - buffer.data[i + 0];
//buffer.data[i + 1] += Math.round(grainLevel * (Math.random() - 0.5));
//buffer.data[i + 2] += Math.round(grainLevel * (Math.random() - 0.5));
buffer.data[i + 3] += Math.round(grainLevel * (Math.random() - 0.5));
}
}
ctx.putImageData(buffer, 0, 0);
return ctx.canvas;
}
height = 600
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.
