Javascript: Using Canvas to cut an area of an image
Over the few weeks I’ve been working on a Canvas based side project (more on that soon) that involved cutting a mask out of a source image and placing it on a Canvas. In Photoshop parlance, this would be similar to creating a clipping mask and then using it to extract a path from the image into a new layer. So visually, we’re looking to achieve something similar to:
At face value, it looks like doing this with Canvas is pretty straightforward using the getImageData function. Unfortunately, if you look at the parameters that function accepts it’ll only support slicing out rectangular areas which isn’t what we’re looking to do. Luckily, if you look a bit further in the docs it turns out Canvas supports setting globalCompositeOperation which allows you to control how image data is drawn onto the canvas. The idea is to draw the mask on a canvas, turn on the “source-in” setting, and then draw on the image that you want to generate the slice off. The big thing to note here is that putImageData isn’t effected by the globalCompositeOperation setting so you have to use drawImage to draw the mask and image data.
So concretely how do you do this? Well check it out:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="underscore-min.js"></script>
<script src="fabric.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<canvas id="target" width="800px" height="400px" style="margin: auto"></canvas>
<script>
$(document).ready(function(){
var mask = new Image(), bg = new Image();
var mDf = $.Deferred(), bgDf = $.Deferred();
mask.src = "grass_overlay.png";
bg.src = "grass_texture.png";
mask.addEventListener("load", function(){ mDf.resolve(this); });
bg.addEventListener("load", function(){ bgDf.resolve(this); });
var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d');
var target = document.getElementById("target"), targetCtx = target.getContext('2d');
$.when(mDf, bgDf).done(function(){
var l = (bg.width / 2) - (mask.width / 2), t = (bg.height / 2) - (mask.height / 2);
canvas.width = bg.width;
canvas.height = bg.height;
ctx.drawImage(mask, l, t);
ctx.globalCompositeOperation = "source-in";
ctx.drawImage(bg, 0, 0);
var imageData = ctx.getImageData(l, t, mask.width, mask.height);
targetCtx.putImageData(imageData, 50, 50);
});
});
</script>
</body>
</html>The code is running over at http://symf.setfive.com/canvas_puzzle/grass.html if you want to see it in action.
Anyway, happy canvasing!
