HTML5 Canvas - Banding with low alpha?

Question

Introduction

I'm currently developing a small drawing application similar to MugTug's Sketchpad. There's one pretty annoying issue I haven't managed to get around yet, though.

Drawing Algorithm

My basic draw algorithm is similar to the one used by MugTug. Basically it just stamps images using drawImage while the user is drawing. There's one serious handicap. The algorithm begins to fail with low alpha.

You can see this easily in the MugTug's tool by setting brush settings in the following way: diameter -> 100, hardness -> 1, flow -> 100, opacity -> 2 (1 is too small! bug in the app?).

There are two main issues: 1. Visible banding. 2. Color shifts (give different colors a go to see how this works...)

Questions

Could the issue have something to do with color precision? It seems to me the Canvas API treats colors using 8 bit channels (ie. 0-255). Is there any way around this limitation? I would prefer to use pure float colors (0.0-1.0) instead if possible.

Any ideas on how to deal with this are welcome. If color is indeed limited to 8 bit channels I guess I'm out of luck...

Answer 1

This problem seems entirely due to color precision. I think most Canvas API implementations use 8 bit RGBA channels. 1% or 2% opacity means that you are applying a very small amount of color to the image, only about 2-5 levels of difference - so even after a lot of repeated applications of the brush, any colors you use will end up being quantised down to a smaller number.

You could make your own a floating point canvas and copy it into a normal canvas after every change. That will make the problem completely unnoticeable for most operations. You'd have to implement your own drawing operations (not too bad if you only use drawImage) and they are likely to be slower than the canvas ones.

Answer 2

Do you see similar issues on MugTug's Sketchpad? I tried with a 4% alpha blue brush over an orange background, and there is banding and such. If it does better than you code then you are doing something wrong.

I've always seen canvas working with 32bit graphics (24 for color + 8 for alpha) so I doubt this can be solved.