javascript - HTML Canvas composition: combining "lighter" and "source-atop" effects -

essentially, have gray-scale image of cube color different colors using html 5 canvas. don't care browser compatibility @ moment, i've been looking @ globalcompositeoperation property values listed here:

https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/globalcompositeoperation

essentially, want combine effects of "source-atop" , "lighter". using source-atop, blue shape, different shades of gray filled in same shade of blue, flat, skewed hexagon instead of cube.

using lighter composite option, closer effect want. cube faces differing shades of blue want, transparent background becomes solid blue.

i love canvas solution produce cube in lighter example without blue background. realize define cube's points , use fill style , paths create cube, have plans use more complex icon shapes cube, , don't want when have gray-scale .png ready unless absolutely have to.

code pretty basic

var canvas = document.getelementsbytagname("canvas")[0]; var ctx = canvas.getcontext("2d"); var cube = new image(); cube.src = "url" //path gray-scale cube image.  ctx.clearrect(0, 0, canvas.width, canvaseheight); ctx.drawimage(cube, 0, 0); ctx.globalcompositeoperation = "lighter"; //or "source-atop" ctx.fillstyle = "blue"; ctx.fillrect(0, 0, canvas.width, canvas.height); 

turns out can combine them pretty easily. here how ended accomplishing task.

var canvas = document.getelementsbytagname("canvas")[0]; var ctx = canvas.getcontext("2d"); var cube = new image(); cube.src = "url" //path gray-scale cube image.  //get blue mask fills entire cube region ctx.clearrect(0, 0, canvas.width, canvaseheight); ctx.drawimage(cube, 0, 0); ctx.globalcompositeoperation = "source-atop"; ctx.fillstyle = "blue"; ctx.fillrect(0, 0, canvas.width, canvas.height);  //save image off somewhere. var bluemask = new image(); bluemask.src = canvas.todataurl();  ctx.clearrect(0,0,canvas.width, canvas.height); ctx.globalcompositeoperation = "source-over";  //draw cube again ctx.drawimage(cube, 0,0);  //draw mask image on 'lighter' composition setting. ctx.globalcompositeoperation = "lighter"; ctx.drawimage(bluemask, 0, 0); 

this produces desired result.