Canvas image masking / overlapping

Active3 hr before
Viewed126 times

5 Answers


Composite mode is the simplest way but also the least flexible as you need to pre-define the clipping mask as an image with a transparent background (usually PNG).,You can also define a Path for the clipping. This is very flexible as you can adjust the path or animate it if you desire.,Here the globalCompositeOperation is changed to source-in which means that the source image (the one we are gonna draw next to destination) will be drawn inside the existing solid data. Nothing will be drawn to transparent areas.,The question as it stands is a bit unclear IMO. To give a more general answer that you can apply to a scenario where you need clipping you can use (at least) two approaches:

Here is an approach where we use the solid parts to clip the next drawn shape/image:

/// draw the shape we want to use for clipping
ctx1.drawImage(imgClip, 0, 0);

/// change composite mode to use that shape
ctx1.globalCompositeOperation = 'source-in';

/// draw the image to be clipped
ctx1.drawImage(img, 0, 0);

Lets define a simple zig-zag path (this will be your waves in your case):

/// use save when using clip Path;

ctx2.moveTo(0, 20);
ctx2.lineTo(50, 0);
/// ... more here - see demo
ctx2.lineTo(400, 20);
ctx2.lineTo(400, 100);
ctx2.lineTo(0, 100);

/// define this Path as clipping mask

/// draw the image
ctx2.drawImage(img, 0, 0);

/// reset clip to default
load more v

A clipping path is like a normal canvas shape but it acts as a mask to hide unwanted parts of shapes. This is visualized in the image on the right. The red star shape is our clipping path. Everything that falls outside of this path won't get drawn on the canvas.,We can not only draw new shapes behind existing shapes but we can also use it to mask off certain areas, clear sections from the canvas (not limited to rectangles like the clearRect() method does) and more.,By default the <canvas> element has a clipping path that's the exact same size as the canvas itself. In other words, no clipping occurs.,In this example, we'll use a circular clipping path to restrict the drawing of a set of random stars to a particular region.

function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.fillRect(0, 0, 150, 150);
   ctx.translate(75, 75);

   // Create a circular clipping path
   ctx.arc(0, 0, 60, 0, Math.PI * 2, true);

   // draw background
   var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
   lingrad.addColorStop(0, '#232256');
   lingrad.addColorStop(1, '#143778');

   ctx.fillStyle = lingrad;
   ctx.fillRect(-75, -75, 150, 150);

   // draw stars
   for (var j = 1; j < 50; j++) {;
      ctx.fillStyle = '#fff';
      ctx.translate(75 - Math.floor(Math.random() * 150),
         75 - Math.floor(Math.random() * 150));
      drawStar(ctx, Math.floor(Math.random() * 4) + 2);


function drawStar(ctx, r) {;
   ctx.moveTo(r, 0);
   for (var i = 0; i < 9; i++) {
      ctx.rotate(Math.PI / 5);
      if (i % 2 === 0) {
         ctx.lineTo((r / 0.525731) * 0.200811, 0);
      } else {
         ctx.lineTo(r, 0);
load more v

Canvas image masking / overlapping, How to add a widget to the Android home screen from my app? Java | 3 months ago

1.2. /// draw the shape we want to use for clipping3.ctx1.drawImage(imgClip, 0, 0);4.5./// change composite mode to use that shape6.ctx1.globalCompositeOperation = 'source-in';7.8./// draw the image to be clipped9.ctx1.drawImage(img, 0, 0);10.11./// use save when using clip;13.14.ctx2.beginPath();15.ctx2.moveTo(0, 20);16.ctx2.lineTo(50,0);17./// ... more here - see demo18.ctx2.lineTo(400, 20);19.ctx2.lineTo(400, 100);20.ctx2.lineTo(0, 100);21.ctx2.closePath();22.23./// define this Path as clipping mask24.ctx2.clip();25.26./// draw the image27.ctx2.drawImage(img, 0, 0);28.29./// reset clip to default30.ctx2.restore();31.

ImgMask is a jQuery image masking / overlapping plugin that replaces part of an image with a transparent image / pattern based on Html5 canvas technique.,Maskify is a jQuery Slider Plugin that make it easier to create an image slider with the effect of an image mask. The plugin will automically offset the images position according to the spacing between their placeholders, giving the impressi,imageMask is a jQuery plugin that simply adds mask effects to your images by using jQuery UI and HTML5 canvas elements. ,polyMask.js is a lightweight, responsive, cross-browser jQuery masking plugin which allows you to apply SVG-based polygon mask / clipping on images or html elements.

CDN-Hosted jQuery Library: <script src="//"></script>

<script src="//"></script>

CSS masking gives you the option of using an image as a mask layer. This means that you can use an image, an SVG, or a gradient as your mask, to create interesting effects without an image editor.,Using a CSS gradient as your mask is an elegant way of achieving a masked area without needing to go to the trouble of creating an image or SVG.,You can also repeat your mask just as you might repeat a background image, in order to use a small image as a repeating pattern.,You can use any of the supported gradient types, and get as creative as you like. This next example uses a radial gradient to create a circular mask to illuminate behind the caption.

@supports(-webkit - mask - image: url(#mask)) or(mask - image: url(#mask)) {
   /* code that requires mask-image here. */ }
load more v

Other "canvas-image" queries related to "Canvas image masking / overlapping"