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.

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();
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.

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas

Contents

1. JavaScript Graphics
2. Getting Started With Canvas
3. Drawing Paths
     Extract: Basic Paths
     Extract: SVG 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
     Extract: OffscreenCanvas
   
10. Bit Manipulation In JavaScript
      Extract: Bit Manipulation
11. Typed Arrays
      Extract: Typed Arrays 
12. Files, blobs, URLs & Fetch
      Extract: Blobs & Files
      Extract: Read/Writing Local Files
      Extract: Fetch API **NEW!
13. Image Processing
      Extract: ImageData
      Extract:The Filter API
    
14. 3D WebGL
      Extract: WebGL 3D
15. 2D WebGL
    Extract: WebGL Convolutions

<ASIN:B07XJQDS4Z>

<ASIN:1871962579>

<ASIN:1871962560>

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.

Comments

Make a Comment or View Existing Comments Using Disqus

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