Canvas GlobalCompositeOperation изменить для элемента - PullRequest
Новая
       52

Canvas GlobalCompositeOperation изменить для элемента

0 голосов
/ 22 февраля 2019

Я пытаюсь сделать маску с изображением в моей форме следующим образом: http://narty.fr/demo/canvas_experiment-1/

Но результат скрывает все другие формы, и когда я пытаюсь установить другую globalCompositeOperation (source-over), не работает..

В моем CenterRound.js 

draw() {
    this.pointsInitial.map((_point, i) => {
        const idX = i * 2
        const idY = i * 2 + 1
        this.points[idX] += _point.coordX()
        this.points[idY] += _point.coordY()
    })

    this.context.drawImage(this.img, this.sizes.width/2 - 500/2, this.sizes.height/2-550/2, 500, 550);

    this.context.globalCompositeOperation = "destination-atop"
    this.context.fillStyle = this.color;
    this.context.beginPath();

    this.context.curve(this.points, 0.5, 80, true)
    this.context.closePath()
    this.context.fill();
}

Это моя первая функция для рисования моей фигуры в центре

А вот в другом классе та же функция безglobalCompositeOperation

В Round.js 

draw() {
    this.pointsInitial.map((_point, i) => {
        const idX = i * 2
        const idY = i * 2 + 1
        this.points[idX] += _point.coordX()
        this.points[idY] += _point.coordY()
    })

    this.context.fillStyle = this.color;
    this.context.beginPath();
    this.context.curve(this.points, 0.5, 80, true)
    this.context.closePath()
    this.context.fill();
}

Я пытаюсь установить новую globalCompositeOperation в этой функции, но это не работает

Спасибо,

...