HTML5 Game - Styling the Square

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

Description

Styling the Square

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>

<head>
    <style>
        #canvas {/*from  ww  w. j  ava2s.  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.fillRect(0, 0, 100, 100);
    </script>
</body>

</html>

Related Topic