CanvasTinter newb question

[Rodrigo]

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.

[ivan.popelyshev]

Its possible to use SVG filters with canvas renderer. You just have to open HTML5 svg filters tutorials or take them from some canvas2d projects like mozilla shumway. If you succeed, you can make a plugin for other people to use with pixi!  Rendering it every frame might be expensive, so you should make implementation like CanvasTinter. Throw in webgl implementation because that also can be handy for other people.

However, to do that you have to make a first step - read your first source file of pixijs. According to https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/canvas/CanvasTinter.js#L23 , that color should be a number, because its passed further to a thing that makes "rgba(x,x,x,x)" out of it.

[Rodrigo]

Mhhh.... EaselJS has filters in it so I could try that, but I'm not very sure if I possess the abilities to produce a PIXI plugin or take the filters fro EaselJS and put them into the PIXI context. 

Regarding the color, yeah I started with the typical color 0xEEEEEE, since that gave me a solid color I innocently thought that using an rgba color could work 

I'll see where this goes and if I have any news I'll come back,

Thanks Ivan!!

[ivan.popelyshev]

The problem why canvas filters werent implemented in pixi is related to

1. pixi doesnt have automatical container caching, that's a hard task and it will certainly lower the code quality, and its required for canvas filters because they are very slow.

2. pixi focuses on webgl and neat code.

[Rodrigo]

As you mention this is not the easiest task, I was looking around and many other frameworks and libraries are using filters on webgl.

In the end what we'll do is use the Sprite tint property with GSAP's color plugin to create the transition from the tint color to white (no tint).

The main issue with this app is that is being packed in a React Native view, so they guy in charge of that tells me that there isn't a chance to use webgl for now.

Thanks again!!,
Rodrigo

[ivan.popelyshev]

> The main issue with this app is that is being packed in a React Native view, so they guy in charge of that tells me that there isn't a chance to use webgl for now.

My condolences