HTML Canvas Rectangle with Shadow

Description

HTML Canvas Rectangle with Shadow

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // SUMMARY: Draws rectangles with shadows on a canvas.

  window.onload = function() {//from  w ww.ja v a 2  s  .  co m

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

    let x1Pos = 25;
    let x2Pos = 175;
    let x3Pos = 325;
    let yPos = 10;
    let length = 100;
    let height = 25;

    // RECTANGLE with shadow.
    context.shadowOffsetX = 4;
    context.shadowOffsetY = 4;
    context.shadowBlur = 3;
    context.fillStyle = "deeppink";
    context.shadowColor = "gray";
    context.fillRect(x1Pos, yPos, length, height);

    // RECTANGLE with shadow.
    context.shadowOffsetX = 8;
    context.shadowOffsetY = 8;
    context.shadowBlur = 3;
    context.strokeStyle = "aqua";
    context.shadowColor = "lightgreen";
    context.lineWidth = 5;
    context.strokeRect(x2Pos, yPos, length, height);

    // RECTANGLE with shadow.
    context.shadowOffsetX = 30;
    context.shadowOffsetY = 30;
    context.shadowBlur = 9;
    context.fillStyle = "darkorange";
    context.shadowColor = "greenyellow";
    context.fillRect(x3Pos, yPos, length, height);
  }
</script>
</head>
<body>
  <div style="width: 500px; height: 80px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="500" height="80"
      style="border: 2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related