HTML5 Game - Create Image object and draw on canvas

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

Description

Create Image object and draw on canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { //from  ww w .  ja va  2  s .c o  m
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
  
  function drawScreen() {
    
     context.drawImage(spaceShip, 0, 0);
     context.drawImage(spaceShip, 50, 50);

  }
  let context = document.getElementById('canvas').getContext('2d'); 
  let spaceShip=new Image();
  spaceShip.src="http://java2s.com/style/download.png";
  spaceShip.addEventListener('load', drawScreen , false);




</script> 



</body> 
</html>

Related Topic