javascript - HTML canvas, use greyscale image as mask -

i'm trying apply mask works in photoshop. black transparent, white visible. however, composite modes don't allow this, think.

i can find modes uses alpha channel, i'd use jpg smaller filesize...

use getimagedata , putimagedata access raw pixel data

you need manually move pixels.

to load image, put onto canvas, canvas pixels. convert greyscale , move alpha. put pixels onto canvas.

var mask; var image = new image; image.src = "image name.jpg"; image.onload = function(){     var canvas = document.createelement("canvas");     canvas.width = this.width;     canvas.height = this.height;     var ctx = canvas.getcontext("2d");     ctx.drawimage(this,0,0);     var data = ctx.getimagedata(0,0,this.width,this.height);     var = 0;     while(i < data.data.length){         var rgb = data.data[i++] + data.data[i++] + data.data[i++];         data.data[i ++]  = rgb / 3;     }     ctx.putimagedata(data,0,0);     mask = canvas; } 

once loaded mask copy of image alpha channel contains mean of rgb channels.

to use

// ctx canvas context want draw mask  if(mask){      ctx.globalcompositeoperation = "destination-out";      ctx.drawimage(mask,0,0);      ctx.globalcompositeoperation = "source-over"; }