HTML5 Game - Cropping an Image

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Image Crop

Description

Cropping an Image

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { // w w w  .  ja  v  a 2 s.co m
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
  let canvas = document.getElementById('canvas').getContext('2d'); 
  let canvasImage = new Image(); 


          function cropImage(){ 
            canvas.drawImage(canvasImage,  
            0, // position X inside the crop 
            0, // position Y inside the crop 
            168, // source image width 
            236, // source image height 
            110, //crop position X 
            110, //crop position Y 
            250, //crop width 
            250 //crop width 
            ); 
          ); 

          canvasImage.addEventListener('load',cropImage,false); 
          
  canvasImage.src = 'http://java2s.com/style/demo/jet.png'; 
</script> 



</body> 
</html>

Related Topic