Jump to content

CanvasTinter newb question


Recommended Posts


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


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);


Here's a live sample:



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :P

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

Thanks Ivan!!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!!,

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...