html5 - Canvas - Createjs - отрицательное пространство в графическом чертеже

Question

У меня сложная ситуация, когда мне нужно нарисовать фигуру с помощью методов lineTo() и drawCircle(), но есть отрицательное поведение пространства в зависимости от того, в каком направлении я рисую линии.

//draw from right to left 
var shape2 = new createjs.Shape(); 
    shape2.graphics.beginFill('blue').moveTo(300,200).lineTo(0,200).lineTo(0,300).lineTo(300,300).closePath(); 
    shape2.graphics.drawCircle(280,250,100) 

Посмотрите на это JsFiddle :) https://jsfiddle.net/zOgs/3epv7o54/

Может кто-нибудь объяснить мне, почему синий круг сделать отрицательное пространство ..? И как избежать такого поведения ...

(я пытался изменить CompositeOperation параметров экземпляра формы, но это, кажется, не имеют никакого эффекта ...)

Thx!

EDIT 1:

Я сделал более точный пример моего рабочего дела. Посмотрите на этот JsFiddle и переместите мышь на холст. Вы увидите, что нет никаких проблем с ПРАВО НА ЛЕВО ... но области негативов появляются от LEFT TO RIGHT !! (быстро двигаться для лучшего зрения)

https://jsfiddle.net/zOgs/psa3x9y2/

Я не понимаю, почему, и я не могу найти правильный обходной путь ... (без кэширования возможно из соображений производительности, нет composeOperation, потому что фоновых неприятностей)

Answer 1

EDIT 1 (удаление двух ранее предложенных обходных путей)

Я думаю, что я нашел решение: Установка заливку снова до круга рисуется, кажется, обратиться Это.

С точки зрения вашего примера это означало бы изменение последней строки выдержки выше, чтобы читать shape2.graphics.beginFill('blue').drawCircle(280,250,100);.

EDIT 2

В ответ на ваши замечания и обновленный jsfiddle, вы можете также попробовать установить shape3.compositeOperation = "xor"; сразу после Shape() конкретизации.

ОБНОВЛЕНО скрипка: https://jsfiddle.net/93gv1e06/