HTML5 Game - Casting drop shadows on some text.

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

Description

Casting drop shadows on some text.

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { /*from   w ww  .j  a  va 2  s  .  c o m*/
  border: 1px solid #000; 
} 
        </style> 
    </head> 
    <body> 
      <canvas id="myCanvas" width="200" height="200">Did You Know: Every time 
        you use a browser that doesn't support HTML5
      </canvas> 
      <script> 
// Get the context we will be using for drawing. 
let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
  
// Add some shadow! 
myContext.shadowOffsetX = 2; 
myContext.shadowOffsetY = 2; 
myContext.shadowBlur = 2; 
myContext.shadowColor = "rgba(0, 0, 0, 0.8)"; 
  
// Draw some text! 
myContext.font = '35px sans-serif'; 
myContext.strokeStyle = '#000'; 
myContext.strokeText('Hello World', 0, 40); 
myContext.textAlign = 'center'; 
myContext.fillStyle = 'rgba(200, 50, 25, 0.8)'; 
myContext.shadowOffsetX = 4; 
myContext.shadowOffsetY = 4; 
myContext.fillText('HTML5', 100, 100); 
      </script> 
    </body> 
</html>

Related Topic