canvas = {
// const height = 600;
const ctx = DOM.context2d(400, 400);
// context.translate(width / 2, height / 2);
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black"; // Green path
ctx.moveTo(50, 0);
ctx.lineTo(400, 400);
ctx.stroke(); // Draw it
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black"; // Green path
ctx.moveTo(200, 0);
ctx.lineTo(0, 400);
ctx.stroke(); // Draw it
var int = lineLineIntersect([50,0],[400,400],[200,0],[0,400]);
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "red"; // Green path
ctx.moveTo(200, 0);
ctx.lineTo(int[0], int[1]);
ctx.stroke(); // Draw it
yield ctx.canvas;
}
function lineLineIntersect([x0, y0], [x1, y1], [x2, y2], [x3, y3]) {
const x02 = x0 - x2, y02 = y0 - y2;
const x10 = x1 - x0, y10 = y1 - y0;
const x32 = x3 - x2, y32 = y3 - y2;
const t = (x32 * y02 - y32 * x02) / (y32 * x10 - x32 * y10);
return [x0 + t * x10, y0 + t * y10];
}
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.
