HTML5 Game - Canvas Displaying Images

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

Description

Displaying Images

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
//Displays images on a canvas.
window.onload = function()/* ww  w.j ava 2s  . c  o m*/
{
   canvas  = document.getElementById("canvasArea");
   context = canvas.getContext("2d");

   //IMAGE sources.
   let smallImage = new Image();
   let largeImage = new Image();
   smallImage.src = "http://java2s.com/style/download.png";
   largeImage.src = "http://java2s.com/style/demo/jet.png";

   //VARIABLES.
   let smallImageXPos    = 40;  let smallImageYPos    = 55;
   let smallImageWidth   = 75;  let smallImageHeight  = 75;
   let largeImageXPos    = 225; let largeImageYPos    = 10;
   let sourceCropX       = 25;  let sourceCropY      = 25;
   let sourceCropWidthX  = 50;  let sourceCropWidthY = 50;
   let imageWidth        = 80;  let imageHeight      = 80;

   //ATTRIBUTES.
   context.shadowOffsetX = -3;
   context.shadowOffsetY = 3;
   context.shadowBlur    = 8;
   context.shadowColor   = "lavender";

   //LOAD image of small ball.
   smallImage.onload = function()
   {
      //DRAW image.
      context.drawImage(smallImage, smallImageXPos,
                                    smallImageYPos);

      //DRAW image with resizing.
      context.drawImage(smallImage, smallImageXPos+80,
                                    smallImageYPos-25,
                                    smallImageWidth,
                                    smallImageHeight);
   }
   //LOAD image of large ball.
   largeImage.onload = function()
   {
      //DRAW image.
      context.drawImage(largeImage, largeImageXPos,
                                    largeImageYPos);

      //DRAW image with cropping.
      context.drawImage(largeImage,
                        sourceCropX,        sourceCropY,
                        sourceCropWidthX,   sourceCropWidthY,
                        largeImageXPos+140, largeImageYPos+10,
                        imageWidth,         imageHeight);
   }
}

</script>
</head>
<body>

<div    style = "width:500px;   height:125px;
                 margin:0 auto; padding:5px;">
<canvas id    = "canvasArea"
        width = "500"  height = "125"
        style = "border:2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

Related Topic