CODEWITHSUNDEEP
javascriptjqueryhtmlcanvascolors
Naveen
Naveen

Reputation: 303

HTML5 canvas color

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?

Upvotes: 4

Views: 379

Answers (2)

Henrik Karlsson
Henrik Karlsson

Reputation: 5713

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.

Upvotes: 0

ohaal
ohaal

Reputation: 5268

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

Upvotes: 2

Related Questions