HTML5 Game - compositors on images

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

Description

compositors on images

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { /*ww  w.  j a  v  a  2s .co  m*/
  border: 1px solid #000; 
} 
        </style> 
    </head> 
    <body> 
      <canvas id="myCanvas" width="200" height="200">Did You Know: Every time 
        you use a browser that doesn't support HTML5
      </canvas> 
      <script> 
let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
  
let myImage = new Image(); 
myImage.src = 'http://java2s.com/style/demo/jet2.png'; 
  
myImage.onload = function() { 
  let myGradient = myContext.createLinearGradient(25, 25, 25, 175); 
  myGradient.addColorStop(0.1, '#000'); 
  myGradient.addColorStop(1, 'rgba(200, 200, 200, 1)'); 
  myContext.fillStyle = myGradient; 

  myContext.beginPath(); 
  myContext.rect(30, 30, 140, 140); 
  myContext.fill(); 
  
  myContext.globalCompositeOperation = 'lighter'; 
  
  myContext.drawImage(myImage, 25, 25); 
}; 
      </script> 
    </body> 
</html>

Related Topic