Canvas How to - Mask image with transparent color

Question

We would like to know how to mask image with transparent color.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#canvasA {<!--  w  ww  .j a  v  a2s  .com-->
  border: solid 1px black;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var tintCanvas = document.createElement('canvas');
tintCanvas.width = 20;
tintCanvas.height = 20;
var tintCtx = tintCanvas.getContext('2d');
var canvas = document.getElementById('canvasA');
var ctx = canvas.getContext('2d');
var pic = new Image();
pic.onload = function () {
    tintCtx.fillStyle = '#ff3633';
    tintCtx.fillRect(x,y,20,20);
    tintCtx.globalCompositeOperation = "destination-atop";
    tintCtx.drawImage(pic, x, y);
    ctx.drawImage(pic, x, y);
    ctx.globalAlpha = 0.5;
    ctx.drawImage(tintCanvas, x, y);
}
pic.src = 'http://www.java2s.com/style/download.png';
    var x = 0;
    var y = 0;
}//]]>  
</script>
</head>
<body>
  <canvas id="canvasA" width="400" height="400"></canvas>
</body>
</html>

The code above is rendered as follows: