Сделать фон холста прозрачным прямоугольником

Question

Мне нужен цветной покрывающий слой холста, и у него есть прозрачное прямоугольное отверстие для отображения тыльной стороны div.

В моем случае метод clip() является противоположной операцией.

Answer 1

Вы можете использовать clearRect(x,y,width,height).Подробнее см. здесь .

Answer 2

Вы правы, но вы можете нарисовать фигуру с отверстием, чтобы обрезать холст.

let ctx = c.getContext("2d");
c.width = 300;
c.height=300;
ctx.fillStyle = "gold";

ctx.beginPath();
ctx.moveTo(0,150);
ctx.lineTo(0,300);
ctx.lineTo(300,300);
ctx.lineTo(300,0);
ctx.lineTo(0,0);
ctx.lineTo(0,150);
ctx.lineTo(50,150);
ctx.lineTo(50,50);
ctx.lineTo(250,50);
ctx.lineTo(250,250);
ctx.lineTo(50,250);
ctx.lineTo(50,150);
ctx.closePath();

ctx.clip();

ctx.beginPath();
ctx.fillRect(0,0,300,300);

div,
canvas {
  width: 300px;
  height: 300px;
  position: absolute;
  border: 1px solid;
  top: 0;
  left: 0;
}
div {
  background: black;
}

p {
  line-height: 300px;
  text-align: center;
  color:white;
}

<div><p>The Div</p></div>
<canvas id="c"></canvas>