HTML Canvas Image draw with various resizing

Description

HTML Canvas Image draw with various resizing

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // SUMMARY: Displays images on a canvas.

  window.onload = function() {/*w  w  w  .java 2  s.c o m*/

    canvas = document.getElementById("canvasArea");
    context = canvas.getContext("2d");

    // IMAGE sources.
    let smallImage = new Image();
    let largeImage = new Image();
    smallImage.src = "image1.png";
    largeImage.src = "image2.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>



PreviousNext

Related