Как нарисовать сетку на Необычной фигуре на холсте

Question

Я пытаюсь найти способ нарисовать сетку поверх изображения 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)

https://jsfiddle.net/m8679fk4/2/

Answer 1

Сначала измените составную операцию на destination-out и, более того, поместите вызов drawGrid (context); в обработчик загрузки сразу после context.drawImage (img, 0, 0); - в противном случае сетка может быть нарисована еще до того, как изображение закончится.