Tutorials Point


  HTML-5 Tutorial
  HTML5 Tag Reference
  HTML5 Useful References
  HTML5 Tools
  HTML5 Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

HTML5 Canvas - Composition


previous next AddThis Social Bookmark Button


Advertisements

HTML5 canvas provides compositing attribute globalCompositeOperation which affect all the drawing operations.

We can draw new shapes behind existing shapes and mask off certain areas, clear sections from the canvas using globalCompositeOperation attribute as shown below in the example.

There are following values which can be set for globalCompositeOperation:

AttributeDescription
source-overThis is the default setting and draws new shapes on top of the existing canvas content.
source-inThe new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.
source-outThe new shape is drawn where it doesn't overlap the existing canvas content.
source-atopThe new shape is only drawn where it overlaps the existing canvas content.
lighterWhere both shapes overlap the color is determined by adding color values.
xorShapes are made transparent where both overlap and drawn normal everywhere else.
destination-overNew shapes are drawn behind the existing canvas content.
destination-inThe existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.
destination-outThe existing content is kept where it doesn't overlap the new shape.
destination-atopThe existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.
darkerWhere both shapes overlap the color is determined by subtracting color values.

Example:

Following is a simple example which makes use of globalCompositeOperation attribute to create all possible compositions:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

var compositeTypes = [
  'source-over','source-in','source-out','source-atop',
  'destination-over','destination-in','destination-out',
  'destination-atop','lighter','darker','copy','xor'
];

function drawShape(){
  for (i=0;i<compositeTypes.length;i++){
    var label = document.createTextNode(compositeTypes[i]);
    document.getElementById('lab'+i).appendChild(label);
    var ctx = document.getElementById('tut'+i).getContext('2d');

    // draw rectangle
    ctx.fillStyle = "#FF3366";
    ctx.fillRect(15,15,70,70);

    // set composite property
    ctx.globalCompositeOperation = compositeTypes[i];

    // draw circle
    ctx.fillStyle = "#0066FF";
    ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI*2,true);
    ctx.fill();
  }
}
</script>
</head>
<body onload="drawShape();">
<table border="1" align="center">
<tr>
 <td><canvas id="tut0" width="125" height="125"></canvas><br/>
     <label id="lab0"></label>
 </td>
 <td><canvas id="tut1" width="125" height="125"></canvas><br/>
     <label id="lab1"></label>
 </td>
 <td><canvas id="tut2" width="125" height="125"></canvas><br/>
     <label id="lab2"></label>
 </td>
</tr>
<tr>
 <td><canvas id="tut3" width="125" height="125"></canvas><br/>
     <label id="lab3"></label>
 </td>
 <td><canvas id="tut4" width="125" height="125"></canvas><br/>
     <label id="lab4"></label>
 </td>
 <td><canvas id="tut5" width="125" height="125"></canvas><br/>
     <label id="lab5"></label>
 </td>
</tr>
<tr>
 <td><canvas id="tut6" width="125" height="125"></canvas><br/>
     <label id="lab6"></label>
 </td>
 <td><canvas id="tut7" width="125" height="125"></canvas><br/>
     <label id="lab7"></label>
 </td>
 <td><canvas id="tut8" width="125" height="125"></canvas><br/>
     <label id="lab8"></label>
</tr>
<tr>
 </td>
 <td><canvas id="tut9" width="125" height="125"></canvas><br/>
     <label id="lab9"></label>
 </td>
 <td><canvas id="tut10" width="125" height="125"></canvas><br/>
     <label id="lab10"></label>
 </td>
 <td><canvas id="tut11" width="125" height="125"></canvas><br/>
     <label id="lab11"></label>
 </td>
</tr>
</table>
</body>
</html>

The above example would produce following result:

Canvas Composition

To learn above concept - Do Online Practice using latest version of either Safari or Opera.



previous next Printer Friendly

Advertisements


  

Advertisements