HTML5 Game - Resizing an Image Painted to the Canvas

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

Description

Resizing an Image Painted to the Canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { //from w ww. j  a  v a  2  s  . c o m
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 

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

  let spaceShip=new Image();
  spaceShip.addEventListener('load', drawScreen , false);
  spaceShip.src="http://java2s.com/style/demo/jet.png";


  function drawScreen() {
     
     //draw a background so we can wee the Canvas edges
     context.fillStyle="#aaaaaa";
     context.fillRect(0,0,500,500);
     
     context.drawImage(spaceShip, 0, 0);
     context.drawImage(spaceShip, 0, 34,32,32);
     context.drawImage(spaceShip, 0, 68,64,64);
     context.drawImage(spaceShip, 0, 140,16,16);

  }



</script> 



</body> 
</html>

Related Topic