HTML5 Game - Adding shadows to drawn objects

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

Description

Adding shadows to drawn objects

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { //w w  w  .  j a va 2s .c om
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
  let context = document.getElementById('canvas').getContext('2d'); 
    
     context.fillStyle =  'red'; 

     context.shadowOffsetX = -4; 
     context.shadowOffsetY = -4; 
     context.shadowColor =  'black'; 
     context.shadowBlur = 4; 
     context.fillRect(10,10,100,100); 

     context.shadowOffsetX = -4; 
     context.shadowOffsetY = -4; 
     context.shadowColor =  'black'; 
     context.shadowBlur = 4; 
     context.fillRect(150,10,100,100); 

     context.shadowOffsetX = 10; 
     context.shadowOffsetY = 10; 
     context.shadowColor =  'rgb(100,100,100)'; 

     context.shadowBlur = 8; 
     context.arc(200, 300, 100, (Math.PI/180)*0, (Math.PI/180)*360, false) 
     context.fill(); 

</script> 



</body> 
</html>

Related Topic