HTML5 Game - Drawing an Image with a Specific Width and Height

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

Introduction

The original image size may be larger than the canvas size.

To fit the image as per the canvas dimensions, use a variation of the drawImage() method that accepts the width and height to which the image must be resized.

The following code shows how to draw an Image with a Specific Width and Height.

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head> 
   <script src="https://code.jquery.com/jquery-2.1.3.js"></script> 
  <meta charset="UTF-8"> 
  <title>HTML5 Canvas</title> 
  <script type="text/javascript">
    window.onload = function(){/*  w  w w .  j a  v  a 2  s . com*/
        let canvas = document.getElementById("myCanvas");
        let context = canvas.getContext("2d");
        // draw stuff here
       let img = new Image(); 
       $(img).load(function () { 
         context.drawImage(img,0,0, canvas.width,canvas.height); 
       }); 
       img.src = "http://java2s.com/style/download.png"; 
    };
</script> 
 </head> 
 <body> 
  <canvas id="myCanvas" width="300" height="200"></canvas>   
 </body>
</html>

Note

In addition to x and y coordinates, the drawImage() method sets the image's width and height.

In the code above, the image width and height are set equal to the canvas width and height.

Related Topic