HTML5 Game - Drawing an Image

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

Description

Drawing an Image

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { /*from   w ww. j  a  va  2 s .c  om*/
  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 drawCanvasImage(){ 
    canvas.drawImage(canvasImage, 155, 0); 
  }; 

  canvasImage.addEventListener('load',drawCanvasImage,false); 

  canvasImage.src = 'http://java2s.com/style/demo/jet.png'; 
</script> 



</body> 
</html>

Related Topic