JavaScript Canvas Clipping & Basic Compositing
Monday, 23 December 2019
Article Index
JavaScript Canvas Clipping & Basic Compositing
Alpha Compositing Modes
A Demonstration Program



This pair of modes displays only the parts of the image outside the overlap.

  • source-out Only the part of the source image that is outside the destination image is shown.

  • Destination-out Only the part of the destination image that is outside the source image is shown.

The same two rectangles drawn before are shown using source-out on the left and destination-out on the right. You can see that the red rectangle has been clipped to what is outside of the blue and vice versa.


Again to find out what happens in the case of intermediate transparency it is best to see what the equations are.

For source-out we have:

An = (1-Ad)*As
Cn = (1-Ad)*Cs

You can see that the Alpha is a product and so if the destination is 1 or source is 0 the pixel is not rendered. The color value is multiplied by one minus destination Alpha so it only shows within background pixels.

For destination-out we have:

An = (1-As)*Ad
Cn = (1-As)*Cd

and only the pixels in the destination that are outside the source are left.

You can see the effect of overlapping the same blue and red rectangles but with Alpha set to 0.5 for source-out (left) and destination-out (right):


A Demonstration Program

It is slightly harder to create the dual source and destination illustrations shown above than you might realize. The problem is that while you can display both left and right rectangle pairs by changing the composite mode between the two, some compositing modes wipe the canvas outside of the source or destination. We have to isolate the two pairs of rectangles from one another. The solution is to use a clip path to restrict where the compositing mode is applied, i.e. apply clipping to compositing.

The program is:

ctx.fillStyle = "rgba(0,0,255,0.5"; 
ctx.fillRect(100, 50, 100, 50);
ctx.fillRect(300, 50, 100, 50);
var myPath = new Path2D();
ctx.clip(myPath );
ctx.fillStyle = "rgba(255,0,0,0.5"; 
ctx.fillRect(150, 75, 100, 50);
myPath = new Path2D();
ctx.fillStyle = "rgba(255,0,0,0.5"; 
ctx.fillRect(350, 75, 100, 50);

Notice the use of save and restore to allow two rectangular clipping paths to be used. You can change the CompositeOperation and fillStyle parameters to see the effects of different configurations.

In book but not included in this extract:

  • More Compositing Modes

  • Blending

  • Blend modes

  • HLS Blend Modes

  • Shadows


  • Paths can be used to clip whatever you are drawing.

  • If you specify another clipping path it is added, as the intersection, to the current path. To remove a clipping path use save and restore.

  • Compositing controls the way new colors are added to the existing colors in an image.

  • There are a large number of compositing rules that you can select using globalCompositeOperation.

  • Most of the Porter-Duff alpha compositing rules are supported.

  • Blending involves mixing colors taking into account the alpha value of the source and destination.

  • You can set a drop shadow on any object and specify its offset, color and blur.

  • A shadow with zero offset can be used to add a “glow” to an object.


Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas




  1. JavaScript Graphics
  2. Getting Started With Canvas
  3. Drawing Paths
      Extract: Basic Paths 
      Extract: Bezier Curves 
  4. Stroke and Fill
      Extract: Stroke Properties 
      Extract: Fill and Holes
      Extract: Gradient & Pattern Fills 
  5. Transformations
      Extract: Transformations
      Extract: Custom Coordinates 
      Extract  Graphics State
  6. Text
      Extract: Text, Typography & SVG 
      Extract: Unicode 
  7. Clipping, Compositing and Effects
      Extract: Clipping & Basic Compositing 
  8. Generating Bitmaps
      Extract:  Introduction To Bitmaps
      Extract :  Animation 
  9. WebWorkers & OffscreenCanvas
      Extract: Web Workers **NEW!
      Extract: OffscreenCanvas
  10. Bit Manipulation In JavaScript
      Extract: Bit Manipulation  
  11. Typed Arrays
  12. Files, blobs, URLs & Fetch
      Extract: Blobs & Files
      Extract: Read/Writing Local Files 
  13. Image Processing
      Extract: ImageData
      Extract: The Filter API
  14. 3D WebGL
      Extract: WebGL 3D 
  15. 2D WebGL
    Extract: WebGL Convolutions 







To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.





or email your comment to:

Last Updated ( Monday, 10 February 2020 )