Hello,
I was working with a simple canvas app (for now we can't use the webgl renderer so we're stuck with canvas) and we're trying to colorize some sprites. Since we're using canvas filters and shaders are out of the question so I was wondering if this is somehow possible using canvas?.
I created a simple test using canvas tinter but the result is a fully painted canvas and not a tinted texture:
const app = new PIXI.Application(800, 600, {
backgroundColor: 0x9cbac9, autoResize: true, forceCanvas: true
});
document.getElementById("app").appendChild(app.view);
const bgTexture = PIXI.Texture.fromImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/landscape.jpg");
PIXI.CanvasTinter.tintWithMultiply(bgTexture, "rgba(179, 179, 179, 0.5)", app.renderer.context.canvas);
const bg = new PIXI.Sprite(bgTexture);
app.stage.addChild(bg);
Here's a live sample:
https://codepen.io/rhernando/pen/620bdae58717e0d3af021db73f096155?editors=0010
Thanks,
Rodrigo.