HTML5 Game - Canvas compositing example

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

Description

Canvas compositing example

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { //  w  ww.  j  a va2  s.c om
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
  let context = document.getElementById('canvas').getContext('2d'); 
    
      //draw a big box on the screen 
      context.fillStyle = "black"; // 
      context.fillRect(10, 10, 200, 200); 

      //leave globalCompositeOperation as is 
      //now draw a red square 
      context.fillStyle = "red"; 
      context.fillRect(1, 1, 50, 50); 

      //now set it to source-over 
      context.globalCompositeOperation = "source-over"; 
      //draw a red square next to the other one 
      context.fillRect(60, 1, 50, 50);      //now set to destination-atop 
      context.globalCompositeOperation = "destination-atop"; 
      context.fillRect(1, 60, 50, 50); 

      //now set globalAlpha 
      context.globalAlpha =  .5; 

      //now set to source-atop 
      context.globalCompositeOperation = "source-atop"; 
      context.fillRect(60, 60, 50, 50); 


</script> 



</body> 
</html>

Related Topic