How To Add Shape Shadow In Html5 Canvas Windows & iPhone Tricks

This article tells you how to add shadow to shape in Html5 canvas.

1. How To Add Shape Shadow In Html5 Canvas.

The example demo URL is https://youtu.be/71Ng2weaWOM.

Below is the screen shortcut of the Html page.
When you slide the slider, it will draw 3 shapes on the Html page with their shadow. When the slider changes the shadow will change also accordingly.
To add shape shadow, you need to set the Html5 canvas context object’s shadowOffsetX, shadowOffsetY, shadowColor, shadowBlur properties.

The shadowOffsetX, shadowOffsetY defines the offset distance between the shadow left-top point and the shape left-top point.
The shadowColor property defines the color of the shadow.
The shadowBlur property defines the shadow blur, the value should between 0 – 10.

This example contains 2 source files, html5-canvas-add-shape-shadow.html, html5-canvas-add-shape-shadow.js.

html5-canvas-add-shape-shadow.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Add Shape Shadow In Html5 Canvas</title>
<script type="text/javascript" src="html5-canvas-add-shape-shadow.js" charset="utf-8"></script>
<style>
canvas{
  display:none;
  margin-top:10px;
}
</style>
</head>
<body>
<h3>How To Add Shape Shadow In Html5 Canvas.</h3>
<div>
    <label>Slide to change the rectangle shadow:</label>
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange" onchange="modifyShadow('canvas1', this)">
    <canvas id="canvas1"></canvas>
</div>
</body>
</html>

html5-canvas-add-shape-shadow.js.

var canvasWidth = 600;
var canvasHeight = 300;

function modifyShadow(canvasId, src){

    // Get the html canvas object.
    var canvas = document.getElementById(canvasId);
    
    if(canvas==null){
        alert("Can not find the html canvas element with element id " + canvasId);
        return false;
    }
    
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    canvas.style.display = 'block';

    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.shadowOffsetX = src.value;
    ctx.shadowOffsetY = src.value;
    ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
    ctx.shadowBlur = 10;
    ctx.fillRect(10, 10, 100, 100);

    ctx.fillStyle = 'yellow';
    ctx.shadowOffsetX = src.value;
    ctx.shadowOffsetY = src.value;
    ctx.shadowColor = 'rgba(255, 0, 0, 1)';
    ctx.shadowBlur = 15;
    centerPointX = 180;
    centerPointY = 60;
    radius = 50;
    startAngle = 0;
    endAngle = Math.PI;
    clockWise = false;
    ctx.beginPath();
    ctx.arc(centerPointX, centerPointY, radius, startAngle, endAngle, clockWise);
    ctx.closePath();
    ctx.fill();

    ctx.strokeStyle = 'green';
    ctx.shadowOffsetX = src.value;
    ctx.shadowOffsetY = src.value;
    ctx.shadowColor = 'rgba(0, 255, 0, 0.5)';
    ctx.shadowBlur = 6;
    ctx.strokeRect(260, 10, 100, 100);

}

1. How To Add Shape Shadow In Html5 Canvas.

Leave a Comment Cancel Reply