Native JS: Blending two images together using a bitmask

[porl91]

Hi all - new to the forum! I've been working on something recently and had to use a bit of a wonky (slow) workaround to get the desired effect and was wondering whether anyone here had had the same issue.

I'm finding it difficult to blend two images together using a bitmask without first rendering the results to a separate canvas, then drawing the blended image from the other canvas to the 'main' canvas.

All my images are the same rectangular shape, and also the same size. For simplicity let's say that the first image is solid blue and the second image is solid green. The bitmask image is a left-to-right gradient ranging from transparent to solid black.

What I'm trying to achieve is to make the green image transition into the blue image without, as I say, using a separate canvas and then transplanting the result into the main canvas. Here's the JS that I'm using at the moment to achieve this in a separate canvas:

context.drawImage(sprites, 96, 0, 32, 16, 0, 0, 32, 16);  // Draw bitmap image
context.globalCompositeOperation = 'source-in';
context.drawImage(sprites, 0, 0, 32, 16, 0, 0, 32, 16);   // Draw green image over the bitmask 
context.globalCompositeOperation = 'destination-over';
context.drawImage(sprites, 32, 0, 32, 16, 0, 0, 32, 16);   // Draw blue image under the current canvas content

I should probably mention that all my sprites are in a single image referenced by 'sprites'.

The reason why I'm forced to use a separate canvas is because I need to *first* render my bitmask on a transparent canvas (which my main canvas isn't, there's a solid background colour) in order to retain the bitmask's transparency. In this contrived example I could just create a transparent image sized gap in the correct region of the main canvas, then perform all my operations there. This is fine when the shapes I'm rendering cover the entire sprite rectangle, although I have a case where I'm rendering circle & diamond shaped sprites and this would result in transparent gaps appearing around the resulting shape in the canvas.

I've been referencing this article in my use of 'globalCompositeOperation':

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

 

Am I approaching this in a reasonable way or is there a better tactic to achieve this?