HTML5 Image masking example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Image masking</title>
	</head>
<body>
	 <h2 style=" color:blue;">Image masking</h2>
    <canvas id="mycanvas" width="200" height="150"></canvas>
   <script>
        var canvas = document.getElementById("mycanvas");
        var ctx = canvas.getContext('2d');

var img = document.createElement('IMG');
        img.onload = function () {

ctx.save();
            ctx.beginPath();
            ctx.moveTo(20, 10);
            ctx.lineTo(100, 30);
            ctx.lineTo(180, 10);
            ctx.lineTo(200, 60);
            ctx.arcTo(180, 70, 120, 0, 10);
            ctx.lineTo(200, 180);
            ctx.lineTo(100, 150);
            ctx.lineTo(70, 180);
            ctx.lineTo(20, 130);
            ctx.lineTo(50, 70);
            ctx.closePath();
            ctx.clip();
            ctx.drawImage(img, 0, 0);
            ctx.restore();
        }
        img.src = "http://techfunda.com/HTPictures/Generics/5-635898849972807270.JPG";
    </script>
</body>
</html>

Note: We DO NOT save your trial code in our database.

HTML5 > Image Masking

Write code here

Output