Search code examples
jquerycanvasmapsopacityarea

jquery maphilight plugin - how to keep black colors of image 100% black when hilighted

I'm using jquery.maphilight plugin to hilight some parts of the image. My image is transparent png containing wireframe:

wireframe image

As you can see, there is an higlighted semitransparent area (html canvas element generated by the plugin, that is overlaying a wireframe. Problem is, that this semitransparent color is taking out the 100% black color of wireframe lines.

Is there any hack that could fix it? Possible solution could be to set a blend mode of that area somehow, or place generated canvas elemets behind the png image, or setting z-indexes of elements. However I am unsucessful with all the listed ideas.

Solution

  • Since the canvas element function as an overlay element you won't be able to use the context blending mode such as multiply.

    Luckily though, you can use this in CSS as well through mix-blend. You have to obtain the canvas element the plugin is using, then apply this CSS rule to it:

    mix-blend-mode: multiply;

    Note: It's not supported in all browsers (FF/Chrome OK).

    Result:

    result image

    var ctx = c.getContext("2d");
ctx.fillStyle ="rgba(255,200,0,0.6)";
ctx.fillRect(50, 10, 180, 100);
    body {position:relative}
#c, img {position:absolute;left:0;top:0}
img {width:300px;height:auto}
#c {
	mix-blend-mode: multiply;
	}
    <img src="http://i.imgur.com/BhOHHWT.png"><canvas id=c></canvas>