[画像: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
   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.

pico book

Comments

Make a Comment or View Existing Comments Using Disqus

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