Home/ Questions/Q 8112899
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T02:39:32+00:00

I have two blocks in HTML5 canvas. Blue Block ie fixed in the canvas

  • 0

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)

enter image description here

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0