HTML5 Canvas: shadowBlur level

We make a slight change to the earlier example and reduce the shadowBlur level.

Codecrawl.com: Styling a square

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Styling a square</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='200' height='200'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    canvas.shadowOffsetX = 20;
    canvas.shadowOffsetY = 20;
    canvas.shadowBlur = 5;
    canvas.shadowColor = 'rgba(200, 0, 200, .3)';
    canvas.fillStyle = 'rgba(200, 0, 200, 1)';
    canvas.fillRect(0, 0, 100, 100);
</script>
</body>
</html>

Here we use shadowBlur level of 5 instead of 20 as compared to the earlier example.

In line 19, we set the shadow color to be rgba(200,0,200,0.3).  The 0.3 is the opacity of the color.

Series Navigation<< HTML5 Canvas: Creating effects
HTML5 Canvas: More effect methods >>