Geek Answers Handbook

HTML5 canvas color

I have two blocks in HTML5 canvas.

  • Blue block, i.e. fixed on canvas
  • A yellow block that can be dragged with the mouse.

When someone moves a yellow block over a blue block, I want to change the color of the overlap or intersection areas to green. (see attached image for a clear view)

enter image description here

Since blue + yellow = green, is there a way to achieve this by changing the opacity level of the blocks or should I look for an overlapping area of ​​the two blocks and display a green block in this area or is there any other way

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

+4
source share
2 answers

Check out the globalCompositeOperation canvas . The lighter composite type seems to fit what you need.

+2
source

You can use 3 elements:

  • Yellow Bottom: Opacity 1
  • Yellow top: Opacity 0.x, same sizes as the bottom.
  • Blue: full opacity between yellow divs

JsFiddle example

This is far from all, but perhaps a step in the right direction.

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

0
source

More articles:


All Articles