HTML5 Game - Draws rectangles with shadows on a canvas.

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

Description

Draws rectangles with shadows on a canvas.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML> <html>
<head>
<script>
window.onload = function() {//  www.  jav  a 2 s.  co m
    canvas = document.getElementById("canvasArea");
    context = canvas.getContext("2d");

    //LAYOUT parameters.
    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>

Related Topic