trngle

<canvas id="my-house" width="800" height="600"></canvas>

<style type="text/css">
    #my-house {
        border-style: solid;
        border-width: 5px;
    }
</style>

<script type="text/javascript">

    function Point(x, y) {
        this.x = x;
        this.y = y;
    }





    function drawLine(ctx, fx, fy, tx, ty) {
        ctx.moveTo(fx + Math.floor(ctx.canvas.width / 2), ctx.canvas.height - (fy + Math.floor(ctx.canvas.height / 2))  );
        ctx.lineTo(tx + Math.floor(ctx.canvas.width / 2), ctx.canvas.height - (ty + Math.floor(ctx.canvas.height / 2))  );
    }

    function len(p1, p2) {
        return Math.sqrt(Math.pow(p2.x - p1.x) + Math.pow(p2.y - p1.y));
    }

    function slope(p1, p2) {
        return (p2.y - p1.y) / (p2.x - p1.x);
    }


    const canvas = document.getElementById('my-house');
    const ctx = canvas.getContext('2d');
    // Set line width
    ctx.lineWidth = 1;

    var v1 = new Point(20, 20);
    var v2 = new Point(120, 0);
    var v3 = new Point(70, 80);

    // drawLine(ctx, 0, -300, 0, 300);
    // drawLine(ctx, -400, 0, 400, 0);

    // performance.now()
    ctx.beginPath();
    // var line1 = len(v1, v2);
    // var line2 = len(v1, v3);
    // var m = slope(v1, v3);

    for(var t = 0; t <= 1; t += 0.01) {
        var fx = v1.x + (v2.x - v1.x) * t;
        var fy = v1.y + (v2.y - v1.y) * t;

        var gx = v1.x + (v3.x - v1.x) * t;
        var gy = v1.y + (v3.y - v1.y) * t;

        fx = Math.round(fx);
        fy = Math.round(fy);
        gx = Math.round(gx);
        gy = Math.round(gy);

        drawLine(ctx, fx, fy, gx, gy);
    }
    ctx.stroke();

</script>