HTML5 Game - Draw text with shadow

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Text Drawing

Description

Draw text with 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  w w .j ava  2  s. c  om
<script type="text/javascript">
  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');

        context.fillStyle  =   'red'; 
        context.save(); 
        context.shadowColor  =  "#ABABAB"; 
        context.shadowOffsetX  =  10; 
        context.shadowOffsetY  =  -10; 
        context.font="50px  Courier"; 
        context.fillText("Hello  World!",20,50); 
        context.restore(); 
        context.fillRect(100,100,200,200); 
  
</script> 

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

Related Topic