HTML5 Canvas: shadowBlur level

This entry is part 7 of 17 in the series HTML5 Canvas

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

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title> Styling a square</title>
        canvas {
            border: 1px solid #000;
<canvas id='canvas' width='200' height='200'></canvas>
    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);

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 >>

Leave a comment

Leave a Reply