Blending/Composing

The globalCompositeOperation attribute sets how shapes and images are drawn onto the existing bitmap.

Properties:

• globalCompositeOperation - determines how what you draw is blended into the existing graphics on the canvas. The values for globalCompositeOperation refers to a "source" and a "destination", and specifies how the source and destination is blended. The source is what you draw, and the destination is what is already drawn (destination is defined as the canvas state preceding a composite operation; source is defined as the canvas state following a composite operation).

See globalCompositeOperation.



In addition, there are modes as in CSS (for example overlay, multiply, screen, ...)

• globalAlpha - specifies the alpha value that is applied to shapes and images before they are drawn onto the canvas (determines the transparency / opacity of what you draw). The value is in the range from 0.0 (fully transparent) to 1.0 (fully opaque).

To Do

Try the following options in the drawDestination function:

1. Add the following line at the beginning of the drawDestination function:

   ctx.globalAlpha = 0.2;
   ctx.fillStyle = 'green';
   ctx.fillRect(10, 10, 100, 100);
   ctx.fillStyle = 'red';
   ctx.fillRect(50, 50, 100, 100);