crop cannot work with tint in canvas mode #2688

phoenixyjll opened this Issue Aug 10, 2016 · 4 comments


None yet

3 participants


This Issue is about (delete as applicable)

  • A bug in the API

For example:

    pic = game.add.sprite(0, 0, 'trsi');
    pic.tint = 0x8CA7E9;
    cropRect = new Phaser.Rectangle(100, 100, 128, 128);

The code has different behaviors under CANVAS mode and WEBGL mode. In CANVAS mode, the rectangle's (x, y) doesn't work, and pic is always cropped from its top-left.

As for the Phaser source code,
renderSession.context.drawImage(this.tintedTexture, 0, 0, cw, ch, dx, dy, cw / resolution, ch / resolution);

it seems that the crop's cx, cy are always 0.

So should I always not use a tint when I need to crop in canvas mode, or it can be fixed so that it has the same behavior as the WEBGL mode?

Thank you.

AleBles commented Aug 10, 2016

Using your example I'm not getting the results you're seeing.

the following code:

var sprite = game.add.sprite(20, 20, 'phaser-dude');
sprite.tint = 0x33cc00;
var rect = new Phaser.Rectangle(8, 10, 11, 30);

Gives me this for WebGL:

And this for Canvas:


Using the Phaser Examples:, and adding a tint to pic:

function create() {

    pic = game.add.sprite(0, 0, 'trsi');

    w = pic.width;
    h = pic.height;

    pic.tint = 0x33cc00;

    cropRect = new Phaser.Rectangle(0, 0, 128, 128);



Under CANVAS mode:


And under WEBGL mode:


phoenixyjll commented Aug 12, 2016 edited

BTW, I'm using Google Chrome 49.0.2623.110 m.

And the result is the same after I updated it to 52.0.2743.116 m.

@photonstorm photonstorm added a commit that referenced this issue Aug 18, 2016
@photonstorm A tinted Texture in Canvas mode wouldn't be updated properly if it wa…
…s also cropped, beyond the initial crop. Now a cropped texture will re-tint itself every time the crop is updated, and has changed (thanks @phoenixyjll #2688)

Thanks for submitting this issue. We have fixed this, and the fix has been pushed to the dev branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment