HTML5 canvas color

Question

I have two blocks in HTML5 canvas.

1. Blue Block ie fixed in the canvas
2. Yellow Block that can be dragged with mouse.

When someone moves the yellow block over blue block, I want to change the color of overlapping or intersection regions to green. (please see attached image to have clear idea)

Since blue + yellow = green , is there any way to achieve this by changing the opacity level of blocks or I have to search for the overlapping area of the two blocks and display green block in that area or is there any other way?

I would like to know what is the best approach to achieve this?

Answer 1

Have a look at canvas globalCompositeOperation . The lighter composite type seems to fit what you're after.

Answer 2

You could use 3 elements:

• Yellow bottom: Opacity 1
• Yellow top: Opacity 0.x, same dimensions as the bottom one
• Blue: Full opacity between the yellow divs

Example on jsFiddle

This is far from done, but maybe a step in the right direction.

EDIT: I noticed too late that you requested it on canvas, but the principe should be the same there.