Создание сетки, которая существует только внутри фигуры

Question

У меня проблемы с выполнением чего-либо в Canvas - я хочу создать сетку, которая существует только внутри этой фигуры.Я могу создать группу, чтобы она соответствовала форме, если она квадратная, но если форма необычная, я не знаю, как создать сетку.

Вот что я имею до сих пор: я толькохотите, чтобы сетка существовала внутри фигуры

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(40, 65);
ctx.lineTo(100, 105);

ctx.lineTo(200, 15);
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 < 501; y += 10) {
    context.moveTo(0, y);
    context.lineTo(300, y);
  }

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

drawGrid(ctx)

https://jsfiddle.net/fom9gtb6/

Answer 1

Вы можете использовать context.globalCompositeOperation = 'source-atop';

От MDN

Новая фигура рисуется только там, где она перекрывает существующее содержимое холста.

Таким образом, strokeStyle фактически используется для сетки вместо стирания частей фигуры, что сделает destination-out.

Answer 2

context.globalCompositeOperation = 'destination-out   ';

должно быть

context.globalCompositeOperation = 'destination-out';