diff --git a/Gruntfile.js b/Gruntfile.js index 43b963d..1d8256a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -49,6 +49,7 @@ '<%= dirs.src %>/renderers/webgl/utils/WebGLFastSpriteBatch.js', '<%= dirs.src %>/renderers/webgl/utils/WebGLFilterManager.js', '<%= dirs.src %>/renderers/webgl/utils/FilterTexture.js', + '<%= dirs.src %>/renderers/canvas/utils/CanvasBuffer.js', '<%= dirs.src %>/renderers/canvas/utils/CanvasMaskManager.js', '<%= dirs.src %>/renderers/canvas/utils/CanvasTinter.js', '<%= dirs.src %>/renderers/canvas/CanvasRenderer.js', diff --git a/Gruntfile.js b/Gruntfile.js index 43b963d..1d8256a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -49,6 +49,7 @@ '<%= dirs.src %>/renderers/webgl/utils/WebGLFastSpriteBatch.js', '<%= dirs.src %>/renderers/webgl/utils/WebGLFilterManager.js', '<%= dirs.src %>/renderers/webgl/utils/FilterTexture.js', + '<%= dirs.src %>/renderers/canvas/utils/CanvasBuffer.js', '<%= dirs.src %>/renderers/canvas/utils/CanvasMaskManager.js', '<%= dirs.src %>/renderers/canvas/utils/CanvasTinter.js', '<%= dirs.src %>/renderers/canvas/CanvasRenderer.js', diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index 6c6f728..12d5bde 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -61,53 +61,7 @@ */ this.transparent = options.transparent; - if(!PIXI.blendModesCanvas) - { - PIXI.blendModesCanvas = []; - - if(PIXI.canUseNewCanvasBlendModes()) - { - PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK??? - PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "multiply"; - PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "screen"; - PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "overlay"; - PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "darken"; - PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "lighten"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "color-dodge"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "color-burn"; - PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "hard-light"; - PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "soft-light"; - PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "difference"; - PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "exclusion"; - PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "hue"; - PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "saturation"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "color"; - PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "luminosity"; - } - else - { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK??? - PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "source-over"; - } - } - + /** * The width of the canvas view * @@ -368,6 +322,56 @@ } }; +PIXI.CanvasRenderer.prototype.mapBlendModes = function() +{ + if(!PIXI.blendModesCanvas) + { + PIXI.blendModesCanvas = []; + + if(PIXI.canUseNewCanvasBlendModes()) + { + PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK??? + PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "multiply"; + PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "screen"; + PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "overlay"; + PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "darken"; + PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "lighten"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "color-dodge"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "color-burn"; + PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "hard-light"; + PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "soft-light"; + PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "difference"; + PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "exclusion"; + PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "hue"; + PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "saturation"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "color"; + PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "luminosity"; + } + else + { + // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" + PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK??? + PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "source-over"; + } + } +}; + /** * Creates a Canvas element of the given size * diff --git a/Gruntfile.js b/Gruntfile.js index 43b963d..1d8256a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -49,6 +49,7 @@ '<%= dirs.src %>/renderers/webgl/utils/WebGLFastSpriteBatch.js', '<%= dirs.src %>/renderers/webgl/utils/WebGLFilterManager.js', '<%= dirs.src %>/renderers/webgl/utils/FilterTexture.js', + '<%= dirs.src %>/renderers/canvas/utils/CanvasBuffer.js', '<%= dirs.src %>/renderers/canvas/utils/CanvasMaskManager.js', '<%= dirs.src %>/renderers/canvas/utils/CanvasTinter.js', '<%= dirs.src %>/renderers/canvas/CanvasRenderer.js', diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index 6c6f728..12d5bde 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -61,53 +61,7 @@ */ this.transparent = options.transparent; - if(!PIXI.blendModesCanvas) - { - PIXI.blendModesCanvas = []; - - if(PIXI.canUseNewCanvasBlendModes()) - { - PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK??? - PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "multiply"; - PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "screen"; - PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "overlay"; - PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "darken"; - PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "lighten"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "color-dodge"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "color-burn"; - PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "hard-light"; - PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "soft-light"; - PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "difference"; - PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "exclusion"; - PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "hue"; - PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "saturation"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "color"; - PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "luminosity"; - } - else - { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK??? - PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "source-over"; - PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "source-over"; - } - } - + /** * The width of the canvas view * @@ -368,6 +322,56 @@ } }; +PIXI.CanvasRenderer.prototype.mapBlendModes = function() +{ + if(!PIXI.blendModesCanvas) + { + PIXI.blendModesCanvas = []; + + if(PIXI.canUseNewCanvasBlendModes()) + { + PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK??? + PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "multiply"; + PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "screen"; + PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "overlay"; + PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "darken"; + PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "lighten"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "color-dodge"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "color-burn"; + PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "hard-light"; + PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "soft-light"; + PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "difference"; + PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "exclusion"; + PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "hue"; + PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "saturation"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "color"; + PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "luminosity"; + } + else + { + // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" + PIXI.blendModesCanvas[PIXI.blendModes.NORMAL] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.ADD] = "lighter"; //IS THIS OK??? + PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.SCREEN] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.DARKEN] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.HUE] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.COLOR] = "source-over"; + PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "source-over"; + } + } +}; + /** * Creates a Canvas element of the given size * diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js new file mode 100644 index 0000000..f559383 --- /dev/null +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -0,0 +1,53 @@ +/** + * @author Mat Groves + * + * + */ + +/** + * Creates a Canvas element of the given size + * + * @method CanvasBuffer + * @param width {Number} the width for the newly created canvas + * @param height {Number} the height for the newly created canvas + * @static + * @private + */ +PIXI.CanvasBuffer = function(width, height) +{ + this.width = width; + this.height = height; + + this.canvas = document.createElement( "canvas" ); + this.context = this.canvas.getContext( "2d" ); + + this.canvas.width = width; + this.canvas.height = height; +}; + +/** + * Clears the canvas that was created by the CanvasBuffer class + * + * @method clear + * @private + */ +PIXI.CanvasBuffer.prototype.clear = function() +{ + this.context.clearRect(0,0, this.width, this.height); +}; + +/** + * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * + * @method resize + * @param width {Number} the new width of the canvas + * @param height {Number} the new height of the canvas + * @private + */ + +PIXI.CanvasBuffer.prototype.resize = function(width, height) +{ + this.width = this.canvas.width = width; + this.height = this.canvas.height = height; +}; +