HTML5 Game - Copying Part of an Image to the Canvas

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

Description

Copying Part of an Image to the Canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { /*from   w w w . j  a va 2 s.c  o m*/
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<p>Here is the sprite image:</p>
<img src='http://java2s.com/style/demo/tank1.png'/>
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 

  let context = document.getElementById('canvas').getContext('2d'); 

  let tileSheet=new Image();
  tileSheet.addEventListener('load', eventSheetLoaded , false);
  tileSheet.src="http://java2s.com/style/demo/tank1.png";
  
  
  function eventSheetLoaded() {
    drawScreen();
  }
  function drawScreen() {
     context.fillStyle="#aaaaaa";
     context.fillRect(0,0,500,500);
     context.drawImage(tileSheet, 32, 0,32,32,50,50,64,64);

     
  }
</script> 
</body> 
</html>

Related Topic