Javascript 如何在画布上的不寻常形状上绘制网格

我正试图找到一种在png图像上绘制网格的方法，这样网格只在图像的一部分上绘制

我不希望在页面的任何部分网格不是形状

你是怎么做到的

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(40, 205);
ctx.lineTo(300, 25);
ctx.fillStyle = 'green';
ctx.fill();


function drawGrid(context) {
  context.globalCompositeOperation = 'destination-out   ';

  for (var x = 40.5; x < 300; x += 10) {
    context.moveTo(x, 0);
    context.lineTo(x, 300);
  }

  for (var y = 0.5; y < 301; y += 10) {
    context.moveTo(0, y);
    context.lineTo(300, y);
  }

  context.strokeStyle = "#ddd";
  context.stroke();
}

drawGrid(ctx)

---

首先，将复合操作更改为destination out 并进一步调用drawGridcontext；进入onload处理程序，就在context.drawImageimg，0，0之后；-否则，网格可能在图像加载完成之前绘制