HTML5 Game - Set up shadow

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

Description

Set up shadow

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>//from w  ww.  j a v  a2 s .  co m
<script type="text/javascript">
  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');

          // setup shadow 
          context.shadowOffsetX = 5; 
          context.shadowOffsetY = 5; 
          context.shadowBlur  = 4; 
          context.shadowColor   = "rgba(0, 0, 0, 0.5)";       
          // draw a red rectangle 
          context.fillStyle = "#ff0000"; 
          context.fillRect(10, 10, 50, 50); 
          // draw a blue rectangle 
          context.fillStyle = "rgba(0,0,255,1)"; 
          context.fillRect(30, 30, 50, 50); 


</script> 
</div>
</body>
</html>

Related Topic