HTML5 Game - Canvas Mirroring Objects

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

Description

Mirroring Objects

Demo

ResultView the demo in separate window 

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

   //IMAGE variable and source.
   let ball = new Image();
   ball.src = "http://java2s.com/style/download.png";

   //BALL variables.
   let ballXPos   = 75;   let ballYPos     = 15;
   let ballWidth  = 90;   let ballHeight   = 90;

   //REFLECTION variables.
   let reflectAdj   = 3.5;
   let reflectAlpha = .4;
   let reflectY     = (2*ballYPos) + (2*(ballHeight-reflectAdj));

   //GRADIENT for surface.
   let gradLV = context.createLinearGradient(0, 0, 0, canvas.height);

   //LOAD image of ball.
   ball.onload = function()
   {
      //COLORS for surface
      gradLV.addColorStop( 0, "lightskyblue" );
      gradLV.addColorStop(.3, "orange"       );
      gradLV.addColorStop( 1, "blue"         );

      //DRAW surface.
      context.fillStyle = gradLV;
      context.fillRect(0, 0, canvas.width, canvas.height);

      //DRAW original image at specific size.
      context.drawImage(ball, ballXPos, ballYPos, ballWidth, ballHeight);

      //TRANSLATE Y position to base of image.
      context.translate(0, reflectY);

      //SCALE to create reflected image.
      context.scale(1,-1);

      //TRANSPARENCY of reflected image.
      context.globalAlpha = reflectAlpha;

      // B7. DRAW reflected image.
      context.drawImage(ball, ballXPos, ballYPos, ballWidth, ballHeight);
   }
}

</script>
</head>
<body>

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

Related Topic