globalCompositeOperation [destination-out]的画布阴影

Question

..Hi there, After a long gap,i again got the opportunity to work with JavaScript and canvas.

here i am trying to draw, transparent image using canvas [ globalCompositeOperation ] helps me alot, i got success on draw image[img1] and removed a overlapped part of image[ img2 ].

search alot but failed : Wanna try to drop shadow on output of canvas,look like below,

Please check out and give me your valuable suggestion OR solution.

 $('.bg').one("load", function() { var canvas = document.getElementById('canva'), context = canvas.getContext('2d'), img1 = $('.bg')[0], img2 = $('.bgover')[0]; context.drawImage(img1, 0, 0); context.globalCompositeOperation = 'destination-out'; context.beginPath(); context.drawImage(img2, 10, 10); context.closePath(); //drop shadow -> Doesn't work context.shadowBlur = 5; context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = "black"; }); 

 body { background: #E7FF00 } .bg { background: url() center; width: 300px; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <img class='bg' src="http://www.qdtricks.org/wp-content/uploads/2015/02/hd-wallpapers-for-mobile.jpg" style='display:none'> <img class='bgover' src="http://spotremoval.coit.com/sites/spotremoval.coit.com/files/styles/stain_sidebar/public/Feces%20Stain%20Removal%20-%20SPOT%20REMOVAL%20GUIDE.png?itok=j6f96IHQ" style='display:none'> <canvas id="canva" width="400" height="400" style="position:absolute;left:0;top:0"></canvas> 

Answer 1

Inner shadow with destination-out & source-atop

This is my solution. Load the image then create a copy with a 2D context so it can be drawn to. Then create a second image a little bigger to accommodate the shadow, offsets, and blur. Make it an inverted mask with comp destination-out . Set the original image's shadow settings. Then draw the mask image on top with comp source-atop

Now the image has the shadow and can be draw where you want it.

The function innerShadow(image,col,offX,offY,blur) does the work. Code is commented so enjoy :)

 /** CanvasCtx.js begin **/ var canvas = document.getElementById("canV"); var ctx = canvas.getContext("2d"); /** CanvasCtx.js end **/ // copies an image adding the 2d context function copyImage(img){ var image = document.createElement("canvas"); image.width = img.width; image.height = img.height; image.ctx = image.getContext("2d"); image.ctx.drawImage(img,0,0); return image; } // creates a blank image with 2d context var createImage = function(w,h){ var image = document.createElement("canvas"); image.width = w; image.height =h; image.ctx = image.getContext("2d"); return image; } // load an image from URL. Create a editable copy and then // call the function ready var loadImage = function(url,ready){ function onload(){ this.removeEventListener("load",onload); image = copyImage(this); ready(image); } var image = new Image(); image.src = url; image.addEventListener("load",onload); } function innerShadow(image,shadowCol,offX,offY,blur){ var mx, my, img1; // create a mask image, with pixel alpha the invers of original // Needs to be bigger so that the shadow is consistant at edges img1 = createImage(image.width+Math.abs(offX)+blur,image.height+Math.abs(offY)+blur); // set the shadow colur to requiered but only for alising the edge img1.ctx.fillStyle = shadowCol; img1.ctx.fillRect(0,0,img1.width,img1.height); // fill the mask img1.ctx.globalCompositeOperation = "destination-out"; // remove dest pixels mx = img1.width/2- image.width/2; // recalculate offsets my = img1.height/2- image.height/2; // draw it 3 times to remove the slight alpha edge bleading img1.ctx.drawImage(image,mx,my); // cut out the images shape from mask img1.ctx.drawImage(image,mx,my); // cut out the images shape from mask img1.ctx.drawImage(image,mx,my); // cut out the images shape from mask // set up shadow settings image.ctx.shadowColor = shadowCol; image.ctx.shadowOffsetX = offX; image.ctx.shadowOffsetY = offY; image.ctx.shadowBlur = blur; // draw the mask with the shadow on original image image.ctx.globalCompositeOperation = "source-atop"; // only visible pixels image.ctx.drawImage(img1,-mx,-my); // draw the shadow } // clear the canvas ctx.clearRect(0,0,canvas.width,canvas.height) // load and add shadow. var imageWithInnerShadow; var shadowOffX = 10; var shadowOffY = 10; var shadowBlur = 10; var shadowCol = "Black"; // load the image loadImage("http://i.stack.imgur.com/Jafta.png",function(img){ // add the shadow innerShadow(img,shadowCol,shadowOffX,shadowOffY,shadowBlur); ctx.drawImage(img,20,20); // show that it worked imageWithInnerShadow = img; // hold the image for use }) 

 .canC { width:500px; height:500px;} 

 <canvas class="canC" id="canV" width=500 height=500></canvas> 

Answer 2

Here's a dropShadow function that has the desired effect.

 $('.bg').one("load", function() { var canvas = document.getElementById('canva'), context = canvas.getContext('2d'), img1 = $('.bg')[0], img2 = $('.bgover')[0]; context.drawImage(img1, 0, 0); context.save(); context.globalCompositeOperation = 'destination-out'; context.drawImage(img2, 10, 10); context.restore(); dropShadow(canvas, "red", 5, 2, 2); }); // This function draws the image to left of canvas // leaving only the shadow then draws the shadow in the // empty space. function dropShadow(can, color, blur, offsetX, offsetY) { var s_can = document.createElement('canvas'); var s_ctx = s_can.getContext('2d'); var ctx = can.getContext('2d'); var w = can.width; var h = can.height; s_can.width = w; s_can.height = h; s_ctx.shadowBlur = blur; s_ctx.shadowColor = color; s_ctx.shadowOffsetX = w; s_ctx.shadowOffsetY = 0; s_ctx.drawImage(can, 0, 0, w, h,-w,0,w,h); ctx.save(); ctx.globalCompositeOperation = 'destination-over'; ctx.drawImage(s_can, offsetX, offsetY); ctx.restore(); } 

 body { background: #E7FF00 } .bg { background: url() center; width: 300px; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <img class='bg' src="http://www.qdtricks.org/wp-content/uploads/2015/02/hd-wallpapers-for-mobile.jpg" style='display:none'> <img class='bgover' src="http://spotremoval.coit.com/sites/spotremoval.coit.com/files/styles/stain_sidebar/public/Feces%20Stain%20Removal%20-%20SPOT%20REMOVAL%20GUIDE.png?itok=j6f96IHQ" style='display:none'> <canvas id="canva" width="400" height="400" style="position:absolute;left:0;top:0"></canvas>