Name: html5 canvas add shape shadow
Uploaded: 2024-03-31T03:30:51+00:00
Duration: T0H0M18S
Description: Demo video of how to add shape shadow in Html5 canvas. You can read the article https://www.dev2qa.com/how-to-add-shape-shadow-in-html5-canvas/ to learn source code.

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

1. How To Add Shape Shadow In Html5 Canvas.

html5 canvas add shape shadow

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