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

comp6

out

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.

comp7

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):

 comp8

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();
myPath.rect(75,25,200,125);
ctx.save();
ctx.clip(myPath );
ctx.globalCompositeOperation="source-out";
ctx.fillStyle = "rgba(255,0,0,0.5"; 
ctx.fillRect(150, 75, 100, 50);
ctx.restore();
myPath = new Path2D();
myPath.rect(275,25,200,125);
ctx.clip(myPath);
ctx.globalCompositeOperation="destination-out";
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

Summary

  • 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.

 star2

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas

largecover360

 

Contents

  1. JavaScript Graphics
  2. Getting Started With Canvas
  3. Drawing Paths
      Extract:  Basic Paths 
  4. Stroke and Fill
      Extract: Stroke Properties 
  5. Transformations
      Extract: Transformations 
  6. Text
      Extract: Text, Typography & SVG 
  7. Clipping, Compositing and Effects
      Extract: Clipping & Basic Compositing 
  8. Generating Bitmaps
      Extract:  Introduction To Bitmaps **NEW!
  9. WebWorkers & OffscreenCanvas
      Extract: OffscreenCanvas
  10. Bit Manipulation In JavaScript
  11. Typed Arrays
  12. Files, blobs, URLs & Fetch
  13. Image Processing
      Extract: ImageData 
  14. 3D WebGL
  15. 2D WebGL
    Extract: WebGL Convolutions 

Related Articles

Reading A BMP File In JavaScript

Getting Started With SVG

SVG, JavaScript and the DOM

Getting Started with Box2D in JavaScript

<ASIN:1871962625>

<ASIN:1871962579>

<ASIN:1871962560>

<ASIN:1871962501>

<ASIN:1871962528>

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.

square

 



 

Comments




or email your comment to: comments@i-programmer.info



Last Updated ( Monday, 10 February 2020 )