Маска

Метод clip() предназначен для создания маски в форме пути, и таким образом, позволяет определить, что будет нарисовано, а что нет.

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.beginPath();
  canvas.moveTo(100, 100);
  canvas.lineTo(200, 200);
  canvas.lineTo(100, 200);
  canvas.clip();
  canvas.beginPath();
  for(var f = 0; f < 300; f = f + 10){
    canvas.moveTo(0, f);
    canvas.lineTo(500, f);
  }
  canvas.stroke();
}

addEventListener("load", initiate);

Цикл for() из листинга создает горизонтальные линии через каждые десять пикселов. Линии пересекают холст слева направо, но на странице мы видим только те фрагменты, которые попадают внутрь треугольной маски.