Basic example

by levchenko_d

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D -->

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

<canvas id="my-house2" width="300" height="300"></canvas>

JavaScript

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

// Wall
ctx.strokeRect(75, 140, 150, 110);

// Door
ctx.fillRect(130, 190, 40, 60);

// Roof
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

console.log(ctx);
const canvas2 = document.getElementById('my-house2');
const ctx2 = canvas2.getContext('2d');
console.log(canvas2.setContext, ctx2);
ctx2.setContext(ctx);