Pixi.js: Resizing canvas behind sprite texture regression in v5

[steve-o]

Expected Behavior

Resizing a PIXI.Sprite to match a PIXI.Texture matching an underlying HTML5 Canvas.

Current Behavior

In v4, whether intentionally or not, it visually works as expected. In v5 the functionality has regressed and the baseTexture size is not updated causing distortion in the image.

Steps to Reproduce

These are the steps currently in use for resizing; width is protected against being zero otherwise Chrome raises many errors.

let canvas = document.createElement("canvas");
let sprite = new PIXI.Sprite.from(canvas);
...
canvas.width = new_width > 0 ? new_width : 2;
sprite.texture.orig.width = new_width;
sprite.width = new_width;
sprite.texture.update();

The value of new_width may be fractional.

Environment

• pixi.js 4.5.3, and 5.0.0.
• Chrome 76.
• Demo with 5.0.0: http://ahyoomee.miru.hk/zignage/not-so-tiny-ticker.html
• Demo with 4.5.3: http://ahyoomee.miru.hk/zignage-previous/not-so-tiny-ticker.html

[steve-o]

Viewing the texture via console.log in v4.5.3, dimensions appear correct,

In v5.0.0 the width of baseTexture remains at original setting of 1408.

[ivanpopelyshev]

Workaround: try something with sprite.texture.baseTexture.setSize

[ivanpopelyshev]

I'm preparing a fix.

[ivanpopelyshev]

Please try pixijs.download/dev-texture-canvas-update/pixi.js

I'll test it myself in several hours. Your case also allowed to solve another one, #5609

[steve-o]

Updated, looks good, although it is emitting errors about the fractional sizes:

pixi.min.js:13520 Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions: X: 0 + 2827.56005859375 = 2827.56005859375 > 2827 or Y: 0 + 163 = 163 > 163
    at Texture.prototypeAccessors.frame.set (pixi.min.js:13520)
    at Texture.onBaseTextureUpdated (pixi.min.js:13238)
    at BaseTexture.emit (pixi.min.js:1119)
    at BaseTexture.update (pixi.min.js:11319)
    at Runner.emit (pixi.min.js:8991)
    at CanvasResource.update (pixi.min.js:10180)
    at CanvasResource.update (pixi.min.js:10361)
    at Texture.update (pixi.min.js:13217)
    at typr-combo-webgl-ticker.html?v29:485

My workaround is to floor (not round) the original texture size,

sprite.texture.orig.width = Math.floor(new_width);

[ivanpopelyshev]

fixed that too. You can omit setting width now,

[bigtimebuddy]

Merged!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.