Canvas-Version2.js

var canvas = document.querySelector("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvas.width = 1600;
canvas.height = 800;

var ctx = canvas.getContext("2d");

// Vanishing point 0
var x0 = 400;
var y0 = 400;

// Vanishing point end 0a
var x0a = 0;
var y0a = 2 * y0;

// Vanishing point end 0b
var x0b = 2 * x0;
var y0b = 2 * y0;

// Define delta
var delta = 700;

function init() {

  // First Line
  ctx.beginPath();
  ctx.moveTo(x0, y0);
  ctx.lineTo(x0a, y0a);
  ctx.strokeStyle = 'red';
  ctx.stroke();

  // Second Line
  ctx.beginPath();
  ctx.moveTo(x0, y0);
  ctx.lineTo(x0b, x0b);
  ctx.strokeStyle = 'green';
  ctx.stroke();

  // // House based on second Line
  ctx.beginPath();
  ctx.moveTo(x0b, y0b); // starting point
  ctx.lineTo(x0b + delta, y0b); // right x+100
  ctx.lineTo(x0b + delta, y0b - delta); // up y-100
  ctx.lineTo(x0b, y0b - delta); // left x-100
  ctx.lineTo(x0b, y0b); // down y+100
  ctx.lineTo(x0b, y0b - delta); // back up y-100
  //calculate
  ctx.lineTo(x0, y0);
  ctx.lineTo(x0b + delta, y0b - delta);
  ctx.strokeStyle = 'blue';
  ctx.stroke();
}

init();