diff --git a/packages/canvas-prepare/package.json b/packages/canvas-prepare/package.json index 0fe6e7ed66..d38b2b88ed 100644 --- a/packages/canvas-prepare/package.json +++ b/packages/canvas-prepare/package.json @@ -40,6 +40,7 @@ "peerDependencies": { "@pixi/canvas-renderer": "6.5.1", "@pixi/core": "6.5.1", - "@pixi/prepare": "6.5.1" + "@pixi/prepare": "6.5.1", + "@pixi/settings": "6.5.1" } } diff --git a/packages/canvas-prepare/src/CanvasPrepare.ts b/packages/canvas-prepare/src/CanvasPrepare.ts index ccdba6eeeb..b9af48ac8d 100644 --- a/packages/canvas-prepare/src/CanvasPrepare.ts +++ b/packages/canvas-prepare/src/CanvasPrepare.ts @@ -1,5 +1,6 @@ import { BaseTexture, ExtensionType } from '@pixi/core'; import { BasePrepare } from '@pixi/prepare'; +import { settings } from '@pixi/settings'; import type { AbstractRenderer, ExtensionMetadata } from '@pixi/core'; import type { CanvasRenderer } from '@pixi/canvas-renderer'; @@ -81,9 +82,10 @@ export class CanvasPrepare extends BasePrepare this.uploadHookHelper = this; - this.canvas = document.createElement('canvas'); - this.canvas.width = CANVAS_START_SIZE; - this.canvas.height = CANVAS_START_SIZE; + this.canvas = settings.ADAPTER.createCanvas( + CANVAS_START_SIZE, + CANVAS_START_SIZE + ); this.ctx = this.canvas.getContext('2d'); diff --git a/packages/canvas-renderer/src/canvasUtils.ts b/packages/canvas-renderer/src/canvasUtils.ts index 1a2acd8547..eba4c58243 100644 --- a/packages/canvas-renderer/src/canvasUtils.ts +++ b/packages/canvas-renderer/src/canvasUtils.ts @@ -1,4 +1,5 @@ import { hex2rgb, rgb2hex } from '@pixi/utils'; +import { settings } from '@pixi/settings'; import { canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; import type { Texture } from '@pixi/core'; @@ -47,7 +48,7 @@ export const canvasUtils = { } else { - canvas = document.createElement('canvas'); + canvas = settings.ADAPTER.createCanvas(); } canvasUtils.tintMethod(texture, color, canvas); @@ -94,7 +95,7 @@ export const canvasUtils = { } if (!canvasUtils.canvas) { - canvasUtils.canvas = document.createElement('canvas'); + canvasUtils.canvas = settings.ADAPTER.createCanvas(); } canvasUtils.tintMethod(texture, color, canvasUtils.canvas); pattern = canvasUtils.canvas.getContext('2d').createPattern(canvasUtils.canvas, 'repeat'); diff --git a/packages/canvas-renderer/src/utils/canUseNewCanvasBlendModes.ts b/packages/canvas-renderer/src/utils/canUseNewCanvasBlendModes.ts index 18e36818eb..9118f4892f 100644 --- a/packages/canvas-renderer/src/utils/canUseNewCanvasBlendModes.ts +++ b/packages/canvas-renderer/src/utils/canUseNewCanvasBlendModes.ts @@ -1,3 +1,5 @@ +import { settings } from '@pixi/settings'; + /** * Creates a little colored canvas * @ignore @@ -6,11 +8,7 @@ */ function createColoredCanvas(color: string): HTMLCanvasElement { - const canvas = document.createElement('canvas'); - - canvas.width = 6; - canvas.height = 1; - + const canvas = settings.ADAPTER.createCanvas(6, 1); const context = canvas.getContext('2d'); context.fillStyle = color; @@ -34,11 +32,7 @@ export function canUseNewCanvasBlendModes(): boolean const magenta = createColoredCanvas('#ff00ff'); const yellow = createColoredCanvas('#ffff00'); - const canvas = document.createElement('canvas'); - - canvas.width = 6; - canvas.height = 1; - + const canvas = settings.ADAPTER.createCanvas(6, 1); const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; diff --git a/packages/compressed-textures/src/loaders/CompressedTextureLoader.ts b/packages/compressed-textures/src/loaders/CompressedTextureLoader.ts index 3071dc08d2..3e4c78d8b8 100644 --- a/packages/compressed-textures/src/loaders/CompressedTextureLoader.ts +++ b/packages/compressed-textures/src/loaders/CompressedTextureLoader.ts @@ -1,5 +1,6 @@ import { LoaderResource } from '@pixi/loaders'; import { url } from '@pixi/utils'; +import { settings } from '@pixi/settings'; import type { Loader } from '@pixi/loaders'; import type { INTERNAL_FORMATS } from '../const'; @@ -167,7 +168,7 @@ export class CompressedTextureLoader if (!CompressedTextureLoader._textureExtensions) { // Auto-detect WebGL compressed-texture extensions - const canvas = document.createElement('canvas'); + const canvas = settings.ADAPTER.createCanvas(); const gl = canvas.getContext('webgl'); if (!gl) diff --git a/packages/core/src/textures/resources/SVGResource.ts b/packages/core/src/textures/resources/SVGResource.ts index 464f631d6a..3a9d2a945b 100644 --- a/packages/core/src/textures/resources/SVGResource.ts +++ b/packages/core/src/textures/resources/SVGResource.ts @@ -1,5 +1,6 @@ import { uid } from '@pixi/utils'; import { BaseImageResource } from './BaseImageResource'; +import { settings } from '@pixi/settings'; import type { ISize } from '@pixi/math'; @@ -51,7 +52,7 @@ export class SVGResource extends BaseImageResource { options = options || {}; - super(document.createElement('canvas')); + super(settings.ADAPTER.createCanvas()); this._width = 0; this._height = 0;