HTML5 Game - Canvas Compositing Objects

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Composite Operations

Description

Compositing Objects

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
//Draws compositing examples on multiple small canvases.
window.onload = function()/*from  www.  j av a2  s. co m*/
{
   //DRAW individual shapes examples.
   drawShapes("source-over");
   drawShapes("source-in");
   drawShapes("source-out");
   drawShapes("source-atop");
   drawShapes("destination-over");
   drawShapes("destination-in");
   drawShapes("destination-out");
   drawShapes("destination-atop");
   drawShapes("lighter");
   drawShapes("copy");
   drawShapes("xor");
}
//DRAW function.
function drawShapes(type)
{
   //CANVAS ID.
   canvas  = document.getElementById(type);
   context = canvas.getContext("2d");

   //VARIABLES.
   let squareOffset = 15;  let squareSide   = 70;
   let circleOffset = 73;  let circleRadius = 35;

   //SQUARE.
   context.fillStyle = "blue";
   context.fillRect(squareOffset,squareOffset,
                    squareSide,  squareSide);

   //COMPOSITE attribute.
   context.globalCompositeOperation = type;

   //CIRCLE.
   context.fillStyle = "red";
   context.beginPath();
   context.arc(circleOffset,circleOffset,circleRadius,
               0,Math.PI*2,true);
   context.fill();
}
</script>
<style type="text/css"> td {text-align:center;}
</style>
</head>
<body>
<table border="0" align="center">
<tr>
<td>  <canvas     id="source-over"      width="120" height="110">
     </canvas><br/><l>source-over</l>
</td>
<td>  <canvas     id="source-in"        width="120" height="110">
     </canvas><br/><l>source-in</l>
</td>
<td>  <canvas     id="source-out"       width="120" height="110">
     </canvas><br/><l>source-out</l>
</td>
<td>  <canvas     id="source-atop"      width="120" height="110">
     </canvas><br/><l>source-atop</l>
</td>
</tr>
<tr>
<td>  <canvas     id="destination-over" width="120" height="110">
     </canvas><br/><l>destination-over</l>
</td>
<td>  <canvas     id="destination-in"   width="120" height="110">
     </canvas><br/><l>destination-in</l>
</td>
<td>  <canvas     id="destination-out"  width="120" height="110">
     </canvas><br/><l>destination-out</l>
</td>
<td>  <canvas     id="destination-atop" width="120" height="110">
     </canvas><br/><l>destination-atop</l>
</td>
</tr>
<tr>
<td>  <canvas     id="lighter"          width="120" height="110">
     </canvas><br/><l>lighter</l>
</td>
<td>  <canvas     id="copy"             width="120" height="110">
     </canvas><br/><l>copy</l>
</td>
<td>  <canvas     id="xor"              width="120" height="110">
     </canvas><br/><l>xor</l>
</td>
</tr>
</table> </body> </html>

Related Topic