diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 3cef74f..edd6a07 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -131,7 +131,7 @@ } const base = texture.baseTexture; - const textureSource = base.source; + const textureSource = base.getDrawableSource(); const textureWidth = base.width; const textureHeight = base.height; diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 3cef74f..edd6a07 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -131,7 +131,7 @@ } const base = texture.baseTexture; - const textureSource = base.source; + const textureSource = base.getDrawableSource(); const textureWidth = base.width; const textureHeight = base.height; diff --git a/packages/canvas/canvas-renderer/src/BaseTexture.js b/packages/canvas/canvas-renderer/src/BaseTexture.js new file mode 100644 index 0000000..d0310d0 --- /dev/null +++ b/packages/canvas/canvas-renderer/src/BaseTexture.js @@ -0,0 +1,15 @@ +import { BaseTexture } from '@pixi/core'; + +/** + * Get the drawable source, such as HTMLCanvasElement or HTMLImageElement suitable + * for rendering with CanvasRenderer. Provided by **@pixi/canvas-renderer** package. + * @method getDrawableSource + * @memberof PIXI.BaseTexture# + * @return {CanvasImageSource} Source to render with CanvasRenderer + */ +BaseTexture.prototype.getDrawableSource = function getDrawableSource() +{ + const resource = this.resource; + + return resource ? (resource.bitmap || resource.source) : this.source; +}; diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 3cef74f..edd6a07 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -131,7 +131,7 @@ } const base = texture.baseTexture; - const textureSource = base.source; + const textureSource = base.getDrawableSource(); const textureWidth = base.width; const textureHeight = base.height; diff --git a/packages/canvas/canvas-renderer/src/BaseTexture.js b/packages/canvas/canvas-renderer/src/BaseTexture.js new file mode 100644 index 0000000..d0310d0 --- /dev/null +++ b/packages/canvas/canvas-renderer/src/BaseTexture.js @@ -0,0 +1,15 @@ +import { BaseTexture } from '@pixi/core'; + +/** + * Get the drawable source, such as HTMLCanvasElement or HTMLImageElement suitable + * for rendering with CanvasRenderer. Provided by **@pixi/canvas-renderer** package. + * @method getDrawableSource + * @memberof PIXI.BaseTexture# + * @return {CanvasImageSource} Source to render with CanvasRenderer + */ +BaseTexture.prototype.getDrawableSource = function getDrawableSource() +{ + const resource = this.resource; + + return resource ? (resource.bitmap || resource.source) : this.source; +}; diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index 2590396..95ddb2b 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -1,5 +1,5 @@ import { AbstractRenderer } from '@pixi/core'; -import { CanvasRenderTarget } from '@pixi/utils'; +import { CanvasRenderTarget, sayHello } from '@pixi/utils'; import CanvasMaskManager from './utils/CanvasMaskManager'; import mapCanvasBlendModesToPixi from './utils/mapCanvasBlendModesToPixi'; import { RENDERER_TYPE, SCALE_MODES, BLEND_MODES } from '@pixi/constants'; @@ -104,6 +104,8 @@ this.renderingToScreen = false; + sayHello('Canvas'); + this.resize(this.options.width, this.options.height); /** diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 3cef74f..edd6a07 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -131,7 +131,7 @@ } const base = texture.baseTexture; - const textureSource = base.source; + const textureSource = base.getDrawableSource(); const textureWidth = base.width; const textureHeight = base.height; diff --git a/packages/canvas/canvas-renderer/src/BaseTexture.js b/packages/canvas/canvas-renderer/src/BaseTexture.js new file mode 100644 index 0000000..d0310d0 --- /dev/null +++ b/packages/canvas/canvas-renderer/src/BaseTexture.js @@ -0,0 +1,15 @@ +import { BaseTexture } from '@pixi/core'; + +/** + * Get the drawable source, such as HTMLCanvasElement or HTMLImageElement suitable + * for rendering with CanvasRenderer. Provided by **@pixi/canvas-renderer** package. + * @method getDrawableSource + * @memberof PIXI.BaseTexture# + * @return {CanvasImageSource} Source to render with CanvasRenderer + */ +BaseTexture.prototype.getDrawableSource = function getDrawableSource() +{ + const resource = this.resource; + + return resource ? (resource.bitmap || resource.source) : this.source; +}; diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index 2590396..95ddb2b 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -1,5 +1,5 @@ import { AbstractRenderer } from '@pixi/core'; -import { CanvasRenderTarget } from '@pixi/utils'; +import { CanvasRenderTarget, sayHello } from '@pixi/utils'; import CanvasMaskManager from './utils/CanvasMaskManager'; import mapCanvasBlendModesToPixi from './utils/mapCanvasBlendModesToPixi'; import { RENDERER_TYPE, SCALE_MODES, BLEND_MODES } from '@pixi/constants'; @@ -104,6 +104,8 @@ this.renderingToScreen = false; + sayHello('Canvas'); + this.resize(this.options.width, this.options.height); /** diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index 16c12a1..1bf7e9b 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,3 +1,5 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; export { autoDetectRenderer } from './autoDetectRenderer'; + +import './BaseTexture'; diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 3cef74f..edd6a07 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -131,7 +131,7 @@ } const base = texture.baseTexture; - const textureSource = base.source; + const textureSource = base.getDrawableSource(); const textureWidth = base.width; const textureHeight = base.height; diff --git a/packages/canvas/canvas-renderer/src/BaseTexture.js b/packages/canvas/canvas-renderer/src/BaseTexture.js new file mode 100644 index 0000000..d0310d0 --- /dev/null +++ b/packages/canvas/canvas-renderer/src/BaseTexture.js @@ -0,0 +1,15 @@ +import { BaseTexture } from '@pixi/core'; + +/** + * Get the drawable source, such as HTMLCanvasElement or HTMLImageElement suitable + * for rendering with CanvasRenderer. Provided by **@pixi/canvas-renderer** package. + * @method getDrawableSource + * @memberof PIXI.BaseTexture# + * @return {CanvasImageSource} Source to render with CanvasRenderer + */ +BaseTexture.prototype.getDrawableSource = function getDrawableSource() +{ + const resource = this.resource; + + return resource ? (resource.bitmap || resource.source) : this.source; +}; diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index 2590396..95ddb2b 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -1,5 +1,5 @@ import { AbstractRenderer } from '@pixi/core'; -import { CanvasRenderTarget } from '@pixi/utils'; +import { CanvasRenderTarget, sayHello } from '@pixi/utils'; import CanvasMaskManager from './utils/CanvasMaskManager'; import mapCanvasBlendModesToPixi from './utils/mapCanvasBlendModesToPixi'; import { RENDERER_TYPE, SCALE_MODES, BLEND_MODES } from '@pixi/constants'; @@ -104,6 +104,8 @@ this.renderingToScreen = false; + sayHello('Canvas'); + this.resize(this.options.width, this.options.height); /** diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index 16c12a1..1bf7e9b 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,3 +1,5 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; export { autoDetectRenderer } from './autoDetectRenderer'; + +import './BaseTexture'; diff --git a/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js b/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js index 70185eb..dbeff77 100644 --- a/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js +++ b/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js @@ -12,7 +12,7 @@ { const texture = this._texture; - if (!texture.baseTexture.hasLoaded) + if (!texture.baseTexture.valid) { return; } @@ -21,6 +21,7 @@ const transform = this.worldTransform; const resolution = renderer.resolution; const baseTexture = texture.baseTexture; + const source = baseTexture.getDrawableSource(); const baseTextureResolution = baseTexture.resolution; const modX = ((this.tilePosition.x / this.tileScale.x) % texture._frame.width) * baseTextureResolution; const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; @@ -42,7 +43,7 @@ } else { - tempCanvas.context.drawImage(baseTexture.source, + tempCanvas.context.drawImage(source, -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } this.cachedTint = this.tint; diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 3cef74f..edd6a07 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -131,7 +131,7 @@ } const base = texture.baseTexture; - const textureSource = base.source; + const textureSource = base.getDrawableSource(); const textureWidth = base.width; const textureHeight = base.height; diff --git a/packages/canvas/canvas-renderer/src/BaseTexture.js b/packages/canvas/canvas-renderer/src/BaseTexture.js new file mode 100644 index 0000000..d0310d0 --- /dev/null +++ b/packages/canvas/canvas-renderer/src/BaseTexture.js @@ -0,0 +1,15 @@ +import { BaseTexture } from '@pixi/core'; + +/** + * Get the drawable source, such as HTMLCanvasElement or HTMLImageElement suitable + * for rendering with CanvasRenderer. Provided by **@pixi/canvas-renderer** package. + * @method getDrawableSource + * @memberof PIXI.BaseTexture# + * @return {CanvasImageSource} Source to render with CanvasRenderer + */ +BaseTexture.prototype.getDrawableSource = function getDrawableSource() +{ + const resource = this.resource; + + return resource ? (resource.bitmap || resource.source) : this.source; +}; diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index 2590396..95ddb2b 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -1,5 +1,5 @@ import { AbstractRenderer } from '@pixi/core'; -import { CanvasRenderTarget } from '@pixi/utils'; +import { CanvasRenderTarget, sayHello } from '@pixi/utils'; import CanvasMaskManager from './utils/CanvasMaskManager'; import mapCanvasBlendModesToPixi from './utils/mapCanvasBlendModesToPixi'; import { RENDERER_TYPE, SCALE_MODES, BLEND_MODES } from '@pixi/constants'; @@ -104,6 +104,8 @@ this.renderingToScreen = false; + sayHello('Canvas'); + this.resize(this.options.width, this.options.height); /** diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index 16c12a1..1bf7e9b 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,3 +1,5 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; export { autoDetectRenderer } from './autoDetectRenderer'; + +import './BaseTexture'; diff --git a/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js b/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js index 70185eb..dbeff77 100644 --- a/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js +++ b/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js @@ -12,7 +12,7 @@ { const texture = this._texture; - if (!texture.baseTexture.hasLoaded) + if (!texture.baseTexture.valid) { return; } @@ -21,6 +21,7 @@ const transform = this.worldTransform; const resolution = renderer.resolution; const baseTexture = texture.baseTexture; + const source = baseTexture.getDrawableSource(); const baseTextureResolution = baseTexture.resolution; const modX = ((this.tilePosition.x / this.tileScale.x) % texture._frame.width) * baseTextureResolution; const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; @@ -42,7 +43,7 @@ } else { - tempCanvas.context.drawImage(baseTexture.source, + tempCanvas.context.drawImage(source, -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } this.cachedTint = this.tint; diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index a5c26f9..476f562 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -50,7 +50,9 @@ let dx = 0; let dy = 0; - if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) + const source = texture.baseTexture.getDrawableSource(); + + if (texture.orig.width <= 0 || texture.orig.height <= 0 || !source) { return; } @@ -134,7 +136,7 @@ } renderer.context.drawImage( - sprite.tintedTexture, + source, 0, 0, width * resolution, @@ -148,7 +150,7 @@ else { renderer.context.drawImage( - texture.baseTexture.source, + source, texture._frame.x * resolution, texture._frame.y * resolution, width * resolution, diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 3cef74f..edd6a07 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -131,7 +131,7 @@ } const base = texture.baseTexture; - const textureSource = base.source; + const textureSource = base.getDrawableSource(); const textureWidth = base.width; const textureHeight = base.height; diff --git a/packages/canvas/canvas-renderer/src/BaseTexture.js b/packages/canvas/canvas-renderer/src/BaseTexture.js new file mode 100644 index 0000000..d0310d0 --- /dev/null +++ b/packages/canvas/canvas-renderer/src/BaseTexture.js @@ -0,0 +1,15 @@ +import { BaseTexture } from '@pixi/core'; + +/** + * Get the drawable source, such as HTMLCanvasElement or HTMLImageElement suitable + * for rendering with CanvasRenderer. Provided by **@pixi/canvas-renderer** package. + * @method getDrawableSource + * @memberof PIXI.BaseTexture# + * @return {CanvasImageSource} Source to render with CanvasRenderer + */ +BaseTexture.prototype.getDrawableSource = function getDrawableSource() +{ + const resource = this.resource; + + return resource ? (resource.bitmap || resource.source) : this.source; +}; diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index 2590396..95ddb2b 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -1,5 +1,5 @@ import { AbstractRenderer } from '@pixi/core'; -import { CanvasRenderTarget } from '@pixi/utils'; +import { CanvasRenderTarget, sayHello } from '@pixi/utils'; import CanvasMaskManager from './utils/CanvasMaskManager'; import mapCanvasBlendModesToPixi from './utils/mapCanvasBlendModesToPixi'; import { RENDERER_TYPE, SCALE_MODES, BLEND_MODES } from '@pixi/constants'; @@ -104,6 +104,8 @@ this.renderingToScreen = false; + sayHello('Canvas'); + this.resize(this.options.width, this.options.height); /** diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index 16c12a1..1bf7e9b 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,3 +1,5 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; export { autoDetectRenderer } from './autoDetectRenderer'; + +import './BaseTexture'; diff --git a/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js b/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js index 70185eb..dbeff77 100644 --- a/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js +++ b/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js @@ -12,7 +12,7 @@ { const texture = this._texture; - if (!texture.baseTexture.hasLoaded) + if (!texture.baseTexture.valid) { return; } @@ -21,6 +21,7 @@ const transform = this.worldTransform; const resolution = renderer.resolution; const baseTexture = texture.baseTexture; + const source = baseTexture.getDrawableSource(); const baseTextureResolution = baseTexture.resolution; const modX = ((this.tilePosition.x / this.tileScale.x) % texture._frame.width) * baseTextureResolution; const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; @@ -42,7 +43,7 @@ } else { - tempCanvas.context.drawImage(baseTexture.source, + tempCanvas.context.drawImage(source, -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } this.cachedTint = this.tint; diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index a5c26f9..476f562 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -50,7 +50,9 @@ let dx = 0; let dy = 0; - if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) + const source = texture.baseTexture.getDrawableSource(); + + if (texture.orig.width <= 0 || texture.orig.height <= 0 || !source) { return; } @@ -134,7 +136,7 @@ } renderer.context.drawImage( - sprite.tintedTexture, + source, 0, 0, width * resolution, @@ -148,7 +150,7 @@ else { renderer.context.drawImage( - texture.baseTexture.source, + source, texture._frame.x * resolution, texture._frame.y * resolution, width * resolution, diff --git a/packages/canvas/canvas-sprite/src/CanvasTinter.js b/packages/canvas/canvas-sprite/src/CanvasTinter.js index 0287f7e..4c8f189 100644 --- a/packages/canvas/canvas-sprite/src/CanvasTinter.js +++ b/packages/canvas/canvas-sprite/src/CanvasTinter.js @@ -96,8 +96,10 @@ context.globalCompositeOperation = 'multiply'; + const source = texture.baseTexture.getDrawableSource(); + context.drawImage( - texture.baseTexture.source, + source, crop.x, crop.y, crop.width, @@ -111,7 +113,7 @@ context.globalCompositeOperation = 'destination-atop'; context.drawImage( - texture.baseTexture.source, + source, crop.x, crop.y, crop.width, @@ -153,7 +155,7 @@ context.globalCompositeOperation = 'destination-atop'; context.drawImage( - texture.baseTexture.source, + texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, @@ -193,7 +195,7 @@ context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( - texture.baseTexture.source, + texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 3cef74f..edd6a07 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -131,7 +131,7 @@ } const base = texture.baseTexture; - const textureSource = base.source; + const textureSource = base.getDrawableSource(); const textureWidth = base.width; const textureHeight = base.height; diff --git a/packages/canvas/canvas-renderer/src/BaseTexture.js b/packages/canvas/canvas-renderer/src/BaseTexture.js new file mode 100644 index 0000000..d0310d0 --- /dev/null +++ b/packages/canvas/canvas-renderer/src/BaseTexture.js @@ -0,0 +1,15 @@ +import { BaseTexture } from '@pixi/core'; + +/** + * Get the drawable source, such as HTMLCanvasElement or HTMLImageElement suitable + * for rendering with CanvasRenderer. Provided by **@pixi/canvas-renderer** package. + * @method getDrawableSource + * @memberof PIXI.BaseTexture# + * @return {CanvasImageSource} Source to render with CanvasRenderer + */ +BaseTexture.prototype.getDrawableSource = function getDrawableSource() +{ + const resource = this.resource; + + return resource ? (resource.bitmap || resource.source) : this.source; +}; diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index 2590396..95ddb2b 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -1,5 +1,5 @@ import { AbstractRenderer } from '@pixi/core'; -import { CanvasRenderTarget } from '@pixi/utils'; +import { CanvasRenderTarget, sayHello } from '@pixi/utils'; import CanvasMaskManager from './utils/CanvasMaskManager'; import mapCanvasBlendModesToPixi from './utils/mapCanvasBlendModesToPixi'; import { RENDERER_TYPE, SCALE_MODES, BLEND_MODES } from '@pixi/constants'; @@ -104,6 +104,8 @@ this.renderingToScreen = false; + sayHello('Canvas'); + this.resize(this.options.width, this.options.height); /** diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index 16c12a1..1bf7e9b 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,3 +1,5 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; export { autoDetectRenderer } from './autoDetectRenderer'; + +import './BaseTexture'; diff --git a/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js b/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js index 70185eb..dbeff77 100644 --- a/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js +++ b/packages/canvas/canvas-sprite-tiling/src/TilingSprite.js @@ -12,7 +12,7 @@ { const texture = this._texture; - if (!texture.baseTexture.hasLoaded) + if (!texture.baseTexture.valid) { return; } @@ -21,6 +21,7 @@ const transform = this.worldTransform; const resolution = renderer.resolution; const baseTexture = texture.baseTexture; + const source = baseTexture.getDrawableSource(); const baseTextureResolution = baseTexture.resolution; const modX = ((this.tilePosition.x / this.tileScale.x) % texture._frame.width) * baseTextureResolution; const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; @@ -42,7 +43,7 @@ } else { - tempCanvas.context.drawImage(baseTexture.source, + tempCanvas.context.drawImage(source, -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } this.cachedTint = this.tint; diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index a5c26f9..476f562 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -50,7 +50,9 @@ let dx = 0; let dy = 0; - if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) + const source = texture.baseTexture.getDrawableSource(); + + if (texture.orig.width <= 0 || texture.orig.height <= 0 || !source) { return; } @@ -134,7 +136,7 @@ } renderer.context.drawImage( - sprite.tintedTexture, + source, 0, 0, width * resolution, @@ -148,7 +150,7 @@ else { renderer.context.drawImage( - texture.baseTexture.source, + source, texture._frame.x * resolution, texture._frame.y * resolution, width * resolution, diff --git a/packages/canvas/canvas-sprite/src/CanvasTinter.js b/packages/canvas/canvas-sprite/src/CanvasTinter.js index 0287f7e..4c8f189 100644 --- a/packages/canvas/canvas-sprite/src/CanvasTinter.js +++ b/packages/canvas/canvas-sprite/src/CanvasTinter.js @@ -96,8 +96,10 @@ context.globalCompositeOperation = 'multiply'; + const source = texture.baseTexture.getDrawableSource(); + context.drawImage( - texture.baseTexture.source, + source, crop.x, crop.y, crop.width, @@ -111,7 +113,7 @@ context.globalCompositeOperation = 'destination-atop'; context.drawImage( - texture.baseTexture.source, + source, crop.x, crop.y, crop.width, @@ -153,7 +155,7 @@ context.globalCompositeOperation = 'destination-atop'; context.drawImage( - texture.baseTexture.source, + texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, @@ -193,7 +195,7 @@ context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( - texture.baseTexture.source, + texture.baseTexture.getDrawableSource(), crop.x, crop.y, crop.width, diff --git a/tools/integration-tests/test/renders/index.js b/tools/integration-tests/test/renders/index.js index 33f03b3..6ee7c0f 100644 --- a/tools/integration-tests/test/renders/index.js +++ b/tools/integration-tests/test/renders/index.js @@ -2,7 +2,7 @@ const path = require('path'); // TODO: disable for now until we get the canvas version up and running again! -describe.skip('renders', function () +describe('renders', function () { before(function () {