canvas = cx.canvas
cx = {
const cx = DOM.context2d(width, height);
cx.strokeStyle = "white";
cx.translate(width/2, height/2);
return cx;
}
{
cx.clearRect(-width/2, -height/2, width, height);
for (let i = -50; i < 50; ++i) {
for (let j = -100; j < 50; ++j) {
const x = x1 * i + x2 * j;
const y = y1 * i + y2 * j;
cx.fillStyle = "rgba(0,0,255,0.2)";
cx.fillRect(x, y, x1+x2, y1-y2);
cx.fillStyle = "rgba(255,0,0,0.2)";
cx.fillRect(x, y, -(x1-x2), -(y1+y2));
}
}
for (let i = -50; i < 50; ++i) {
for (let j = -100; j < 50; ++j) {
const x = x1 * i + x2 * j;
const y = y1 * i + y2 * j;
// cx.strokeStyle = "blue";
// cx.strokeRect(x, y, x1+x2, y1-y2);
cx.strokeStyle = "red";
cx.strokeRect(x, y, -(x1-x2), -(y1+y2));
}
}
}
height = 800
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.
