Anti-aliasing edges after floodfill in HTML5 canvas?

Question

I am trying to implement a flood-fill algorithm that produces antialiased edges in HTML5 canvas.

My initial input is an ImageData object, which contains the outlines of overlapping circles and lines over a transparent background. The outlines are already antialised, and I have the actual color of the edges (rgba(51, 51, 51, 255)), and some grayscale "fringe" pixels produced by antialising the shapes (with values like rgba(48, 48, 48, 32) and rgba(54, 54, 54, 200)).

My current flood-fill implementation is aware of these fringe pixels, but it simply applies the fill color to them - resulting in pixelation. I also tried to apply the alpha-blending from this answer, also resulting in pixelation.

What algorithm would you recommend for producing smooth edges by blending the colors from these fringe pixels and the fill color?

Side question : wouldn't, for the antialiasing, be enough to change the alpha ? You could build an antialiased version of the flood fill (with borders having same rgb, but alpha proportionnal to the space filled within the pixel), then add it to the drawings of the circles/lines. — GameAlchemist

Thomas Thomas · Accepted Answer · 2016-02-03T18:04:56

I think you need to blend your fringe pixels "on top of" the (solid) flood fill colour. Something like this (pseudocode):

alpha = pixel.alpha / 255;
pixel.r = alpha * pixel.r + (1 - alpha) * fill.r;
pixel.g = alpha * pixel.g + (1 - alpha) * fill.g;
pixel.b = alpha * pixel.b + (1 - alpha) * fill.b;

In other words, if the fringe pixel is opaque (alpha == 1), it just retains its colour. If it's fully transparent (alpha == 0), it receives the flood fill colour. In between those extremes, do a linear interpolation based on alpha.

Anti-aliasing edges after floodfill in HTML5 canvas?

1 Answers