diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 119103a..4dcd773 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -201,6 +201,7 @@ context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -318,6 +319,14 @@ this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 119103a..4dcd773 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -201,6 +201,7 @@ context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -318,6 +319,14 @@ this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 119103a..4dcd773 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -201,6 +201,7 @@ context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -318,6 +319,14 @@ this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index af018d4..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -89,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -120,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -144,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -162,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -186,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -198,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 119103a..4dcd773 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -201,6 +201,7 @@ context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -318,6 +319,14 @@ this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index af018d4..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -89,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -120,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -144,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -162,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -186,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -198,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index 5354e2c..6eaf2e0 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -244,6 +244,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 119103a..4dcd773 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -201,6 +201,7 @@ context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -318,6 +319,14 @@ this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index af018d4..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -89,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -120,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -144,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -162,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -186,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -198,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index 5354e2c..6eaf2e0 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -244,6 +244,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 2196fb0..1c725d2 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -248,12 +248,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha;