You can add shadow to an image by simply specifying the x-offset and y-offset of the shadow from the image before you draw the image using drawImage.
shadowOffsetX = number of pixels offset in the x direction; shadowoffsetY = number of pixels offset in the y direction;
You can also specify the color of the shadow.
shadowColor = "colour of the shadow"; For eg: shadowColor = "pink";
If you want more control over the colors, you could choose to specify the hex value or rgb value. If you are specifying hex value, the value can range from 000000 to FFFFFF.
For eg: shadowColor = "AFFF2F";
Alternately, you could specify the value of red, green and blue in decimal. Each of the values will range from 0 to 255
For eg: shadowColor = "rgb(255,100,100)";
If you are specifying the shadowColor using rgb value, you can also specify the transparency of the color by passing a fourth parameter. The value of this parameter will range from 0 to 1 with 0 being fully transparent to 1 being fully opaque.
For eg: shadowColor = "rgba(255,100,100,0.5)";
HTML Code
<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
// Create a new image object
var flower = new Image();
//Provide the source directory of the image you are about to upload.
flower.src = "flower.png";
//Secify the offset and color of the shadow
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 3;
ctx.shadowColor = "pink";
// Make sure the image is loaded before you draw it on the canvas
flower.onload = function() {
