Как правильно применять globalCompositeOperation к элементам canvas?

Question

У меня проблема с globalCompositeOperation.

Моя цель - сделать так, чтобы синий элемент отображался только внутри красного элемента и не должен быть видимым за пределами красного прямоугольника (эффект Overflow-Hidden). Кроме того, и красный, и синий должны обладать способностью трансформации (оба редактируемые).

Как вы можете видеть, если я добавлю еще один элемент на холст (желтый элемент), синий станет видимым в области, где желтый и синий перекрываются.

http://jsfiddle.net/redlive/q4bvu0tb/1/

var canvas = new fabric.Canvas('c');


var yellow = new fabric.Circle({
  top: 200,
  left: 0,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'yellow'
});
canvas.add(yellow);


var red = new fabric.Rect({
  top: 0,
  left: 0,
  width: 300,
  height: 300,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'red',
  rx: 40
});
canvas.add(red);


var blue = new fabric.Circle({
  top: 150,
  left: 80,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'blue',
    globalCompositeOperation: 'source-atop'
});
canvas.add(blue);



var green = new fabric.Circle({
  top: 0,
  left: 0,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'green'
});
canvas.add(green);

Обязательные условия:

• Сохранить элементы внешнего вида на холсте.
• Без обрезки (поскольку обрезка не позволяет одновременно добавлять цвет фона и изображение)

Answer 1

Это может быть достигнуто с помощью следующих шагов...

• удалить yellow элемент перед рисованием blue один
• после рисования blue элемент установить yellow элемента globalCompositeOperation в destination-over и добавить его обратно

var canvas = new fabric.Canvas('c');

var yellow = new fabric.Circle({
  top: 200,
  left: 0,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'yellow'
});
canvas.add(yellow);

var red = new fabric.Rect({
  top: 0,
  left: 0,
  width: 300,
  height: 300,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'red',
  rx: 40
});
canvas.add(red);

canvas.remove(yellow); //remove yellow

var blue = new fabric.Circle({
  top: 150,
  left: 80,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'blue',
  globalCompositeOperation: 'source-atop'
});
canvas.add(blue);

yellow.set({globalCompositeOperation: 'destination-over'}); //set gCO for yellow
canvas.add(yellow); //add yellow back

var green = new fabric.Circle({
  top: 0,
  left: 0,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'green'
});
canvas.add(green);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="800" height="800"></canvas>