1

Situation is basically draw several moving primitive shapes with a basic linear gradient so they overlap on a transparent blank canvas. Where they overlap the alpha channel value changes (ie, they bleed).

Final stage is rounding the alpha for each individual pixel, so it's either 0 or 255 depending on which it's closer to.

With imageData it's easy to do -

var ctxImage = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var ctxData = ctxImage.data;
for (var i = 0; i < ctxData.length; i += 4) {
    ctxData[i + 3] = ctxData[i + 3] > 128 ? 255 : 0;
    // or ctxData[i + 3] = Math.round(ctxData[i + 3] / 255) * 255;
}
ctx.putImageData(ctxImage, 0, 0);

As that getImageData is very expensive in CPU time, I was hoping to work out a solution that used globalCompositeOperation, but just can't seem any way to get it to work, any ideas?

Rycochet
  • 2,860
  • 1
  • 22
  • 39

1 Answers1

0

There's no alternative way of snapping the alpha to 0 || 255.

Compositing lets either the source or destination pixel survive, but won't snap the alpha as you describe.

markE
  • 102,905
  • 11
  • 164
  • 176
  • That's what I thought - but had hoped that I could get something close - a little edge translucency isn't a bad thing :-/ – Rycochet Feb 11 '15 at 07:11