Комбинирование фигур

Для определения каким образом  фигуры, выводящиеся на холст, должны комбинироваться с другими фигурами, существуео свойство globalCom-positeOperation. Рассмотрим возможные значения данного свойства:

• source-over – новая фигура визуализируется поверх уже имеющихся на холсте.
• source-in – визуализируется только та часть фигуры, которая перекрывает предыдущую фигуру.
• source-out – визуализируется только та часть фигуры, которая не перекрывает предыдущую.
• source-atop – визуализируется только та часть фигуры, которая перекрывает предыдущую фигуру. Предыдущая фигура сохраняется целиком, но остальные фрагменты новой фигуры становятся прозрачными.
• lighter – визуализируются обе фигуры, но цвет перекрывающихся путей определяется путем сложения цветовых значений.
• xor – визуализируются обе фигуры, но перекрывающиеся фрагменты становятся прозрачными.
• destination-over – это противополжность значению по умолчанию. Новые фигуры визуализируются позади фигур уже добавленных на холст.
• destination-in – сохраняются только те фрагменты существующих фигур, которые перекрываются новой. Все остальные, включая новую фигуру, становятся прозрачными.
• destination-out – сохраняются только те фрагменты существующих фигур, которые не перекрываются новой фигурой. Все остальные, включая новую фигуру, остаются прозрачными.
• destination-atop – существующие фигуры и новая фигура становятся прозрачными, за исключением тех фрагментов, где они перекрываются.
• darker – визуализируются обе фигуры, но цвет перекрывающихся фрагментов определяется вычитанием цветовых значений.
• copy — визуализируется только новая фигура, остальные становятся прозрачными.

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.fillStyle = "#666666";
  canvas.fillRect(100, 100, 200, 80);
  canvas.globalCompositeOperation = "source-atop";
  canvas.fillStyle = "#DDDDDD";
  canvas.font = "bold 60px verdana, sans-serif";
  canvas.textAlign = "center";
  canvas.textBaseline = "middle";
  canvas.fillText("TEST", 200, 100);
}
addEventListener("load", initiate);