HTML5 Game - Slicing and Scaling an Image on canvas

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

Description

Slicing and Scaling an Image on canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { /*from   www. j av a2  s .c  o  m*/
  border: 1px solid #000; 
} 
        </style> 
    </head> 
    <body> 
      <canvas id="myCanvas" width="200" height="200">Did You Know: Every time 
        you use a browser that doesn't support HTML5
      </canvas> 
      <script> 
// Get the context we will be using for drawing. 
let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
  
// Create a new image element and fill it with a kitten. 
let myImage = new Image(); 
myImage.src = 'http://java2s.com/style/demo/jet2.png'; 
  
// We can't do anything until the image has successfully loaded. 
myImage.onload = function() { 
  myContext.drawImage(myImage, 25, 25, 150, 150, 0, 0, 150, 50); 
}; 
      </script> 
    </body> 
</html>

Related Topic