HTML5 Canvas - Banding a basso alfa?

Question

Introduzione

Al momento sto sviluppando una piccola applicazione di disegno simile a MugTug di Sketchpad . C'è un problema abbastanza fastidioso non sono riuscito ad ottenere ancora in giro, però.

Disegno Algoritmo

Il mio algoritmo di disegno di base è simile a quella usata da MugTug. Fondamentalmente soli stamps immagini utilizzando drawImage mentre l'utente sta elaborando. C'è un grave handicap. L'algoritmo inizia a fallire con basso alfa.

Si può vedere questo facilmente nel strumento del MugTug impostando impostazioni di pennello nel modo seguente: diametro -> 100, durezza -> 1, il flusso -> 100, opacità -> 2 (1 è troppo piccolo bug in app! ?).

Ci sono due questioni principali: 1. banding visibile. 2. Colore turni (dare colori diversi un andare a vedere come funziona ...)

Domande

Potrebbe il problema avere qualcosa a che fare con la precisione del colore? Mi sembra la tela API tratta i colori usando 8 canali bit (es. 0-255). C'è un modo per aggirare questa limitazione? Io preferirei usare i colori puri galleggiante (0.0-1.0), invece, se possibile.

Tutte le idee su come affrontare questo sono i benvenuti. Se il colore è infatti limitata a 8 canali bit Credo di essere fuori di fortuna ...

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.