HTML5 Game - Styling with shadow

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

Description

Styling with shadow

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>

<head>
    <style>
        #canvas {/*from  ww w  . ja va2s  . c o m*/
            border: 1px solid #03F;
            background: #CFC;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
        let canvas = document.getElementById('canvas').getContext('2d');
        canvas.shadowOffsetX = 10;
        canvas.shadowOffsetY = 10;
        canvas.shadowBlur = 10;
        canvas.shadowColor = 'rgba(200, 0, 200, .3)';
        canvas.fillStyle = 'rgba(200, 0, 200, 1)';
        canvas.strokeStyle = '#09c';
        canvas.lineWidth = 5;
        canvas.fillRect(0, 0, 100, 100);
        canvas.clearRect(25, 25, 50, 50);
        canvas.strokeRect(25, 25, 50, 50);
    </script>
</body>

</html>

Related Topic