HTML5 Game - Canvas Composition modes

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

Description

Composition modes

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head>
      <title>Canvas Composite Operations</title>
      <style>
         #canvas {/*from   w ww  .ja v  a2s  .  c o  m*/
              border: 1px solid cornflowerblue;
            position: absolute;
            left: 150px;
            top: 10px;
            background: #eeeeee;
            border: thin solid #aaaaaa;
            cursor: pointer;
            -webkit-box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
            -moz-box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
            box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
         }
      </style>
   </head>

   <body>
      <select id='compositingSelect' size='11'>
         <option value='source-atop'>source-atop</option>   
         <option value='source-in'>source-in</option>   
         <option value='source-out'>source-out</option>   
         <option value='source-over'>source-over (default)</option>   
         <option value='destination-atop'>destination-atop</option>   
         <option value='destination-in'>destination-in</option>   
         <option value='destination-out'>destination-out</option>   
         <option value='destination-over'>destination-over</option>   
         <option value='lighter'>lighter</option>   
         <option value='copy'>copy</option>   
         <option value='xor'>xor</option>   
      </select>   

        <canvas id='canvas' width='600' height='420'>
         Canvas not supported
        </canvas>

      <script>
let context = document.getElementById('canvas').getContext('2d'),
    selectElement = document.getElementById('compositingSelect');

function drawText() {
   context.save();

   context.shadowColor   = 'rgba(100, 100, 150, 0.8)';
   context.shadowOffsetX = 5;
   context.shadowOffsetY = 5;
   context.shadowBlur    = 10;

   context.fillStyle = 'cornflowerblue';
   context.fillText('HTML5', 20, 250); 

   context.strokeStyle = 'yellow';
   context.strokeText('HTML5', 20, 250);

   context.restore();
}

function windowToCanvas(canvas, x, y) {
   let bbox = canvas.getBoundingClientRect();
   return { x: x - bbox.left * (canvas.width  / bbox.width),
            y: y - bbox.top  * (canvas.height / bbox.height)
          };
}

context.canvas.onmousemove = function(e) {
   let loc = windowToCanvas(context.canvas, e.clientX, e.clientY);
   context.clearRect(0, 0, context.canvas.width, context.canvas.height);
   drawText();

   context.save();

   context.globalCompositeOperation = selectElement.value;
   context.beginPath();
   context.arc(loc.x, loc.y, 100, 0, Math.PI*2, false);
   context.fillStyle = 'orange';
   context.stroke();
   context.fill();

   context.restore();
}

selectElement.selectedIndex = 3;
context.lineWidth = 0.5;
context.font = '128pt Comic-sans';
drawText();
        
        </script>
   </body>
</html>

Related Topic