生成的图形如下所示 - 在线编辑器

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

<script>
const canvas = document.getElementById('my-house');
const ctx = canvas.getContext('2d');

// 设定线宽
ctx.lineWidth = 10;

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

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

// 屋顶
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
</script>

        