Маскирование Createjs с drawRect не работает в Safari

Question

Я хочу вырезать несколько квадратов из картинки.Проблема в том, что Createjs маскирование с drawRect не работает в Safari.Пожалуйста, проверьте следующий код в Safari

https://codepen.io/anon/pen/moXXRN

. Он работает во всех браузерах, кроме Safari

.

Answer 1

Проблема заключается не в маскировке или EaselJS, а в том, как Safari обрабатывает прямоугольники с намоткой, нарисованные с отрицательными координатами. Похоже, что большинство браузеров обрабатывают прямоугольник с одним отрицательным измерением, как нарисовано в обратном порядке, но Safari этого не делает.

Супер простой пример холста имеет ту же проблему:

var ctx = document.getElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.rect(50,50,50,50);
ctx.rect(150, 150, 50, 50);
ctx.rect(300, 0, 350, -350);
ctx.fillStyle = "red";
ctx.fill();

В большинстве браузеров это рисует вырезанную область. Safari нет.

Ваше решение использования собственных lineTo() команд - хороший обходной путь.

Answer 2

удалось заставить его работать в Safari, используя функции lineTo и moveTo вместо drawRect

, например

shape.graphics.moveTo( 50, 50 );
shape.graphics.lineTo( 100, 50 );
shape.graphics.lineTo( 100, 100 );
shape.graphics.lineTo( 50, 100 );
shape.graphics.lineTo( 50, 50 );

shape.graphics.moveTo( 300, 0 );
shape.graphics.lineTo( 0, 0 );
shape.graphics.lineTo( 0, 300 );
shape.graphics.lineTo( 300, 300 );
shape.graphics.lineTo( 300, 0 );

https://codepen.io/anon/pen/EMEZMx