HTML5 Game - Enhancing shapes with shadows

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

Description

Enhancing shapes with shadows

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <style type = "text/css">
    body {/*from   w  w w.  ja  va  2 s . c o  m*/
      background-color: #cccccc;
    }
  </style>
  <script type = "text/javascript">
    function draw(){
      let drawing = document.getElementById("drawing");
      let con = drawing.getContext("2d");
      
      //clear background
      con.fillStyle = "white";
      con.fillRect(0,0, 200, 200);

      // draw font in red
      con.fillStyle = "red";
      con.font = "18pt sans-serif";

      //add shadows
      con.shadowOffsetX = 3;
      con.shadowOffsetY = 3;
      con.shadowColor = "black";
      con.shadowBlur = 5;
      con.fillText("Canvas Rocks!", 5, 100);
    }
  </script>
</head>

<body onload = "draw()">
  <h1>Shadows</h1>
  
  <canvas id = "drawing"
          height = "200"
          width = "200">
    <p>Canvas not supported!</p>
  </canvas>

</body>
</html>

Related Topic