Applying a Drop Shadow

Applying a drop shadow to an image, rectangle, text or any other element in an HTML5 Canvas is achieved using a few lines of javascript:

<body onload="drawCanvas();">
    <div>
        <canvas id="myCanvas" width="150" height="150">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
    </div>
</body>

function drawCanvas() {
    // Get our Canvas element
    var surface = document.getElementById("myCanvas");

    if (surface.getContext) {
        // If Canvas is supported
        var context = surface.getContext('2d');

        context.shadowOffsetX = 4;
        context.shadowOffsetY = 4;
        context.shadowBlur = 5;
        context.shadowColor = "black";

        // Set the fill style to Red
        context.fillStyle = "rgb(255,0,0)";
        // Draw the rectangle 50x50 pixels in dimension at x/y 10,10
        context.fillRect(10, 10, 100, 100);
    }
}

Here we draw a solid Red rectangle using the fillRect() method that we've already covered in the Shapes and Fill Styles section.  The Drop Shadow is achieved by specifying the following properies:

context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 5;
context.shadowColor = "black";

The shadowOffsetX and shadowOffsetY properties control the offset of the shadow from the rectangle whilst the shadowBlur property controls how sharp the shadow is.

A Solid Filled Rectangle witha Drop Shadow

Post your Comments

 
Latest Games
Zombie Escape
Apr 19, 2016
Plays: 596

Zombie Escape ScreenshotDrive fast before the crazy mutant zombies get you!

6 Ratings/4.1 Average
Car Parking
Jan 16, 2016
Plays: 647

Car Parking ScreenshotGuide the car to its parking space in this fun Car Parking game.

1 Rating/5 Average
Trash It
Jan 11, 2016
Plays: 673

Trash It ScreenshotAim for the Trash Can and get the various items of Trash in the bin.

3 Ratings/5 Average
Sky Fly
Jan 11, 2016
Plays: 660

Sky Fly ScreenshotFly your plane in this colorful vertical scrolling shoot-em-up. Blast the bad guys and collect any bonus's they leave behind.

1 Rating/5 Average
Professor Snappy
Jan 11, 2016
Plays: 475

Professor Snappy ScreenshotPop as many bubbles as possible in this fun and colorful bubble popping game. The levels start off easy enough but gradually get harder!

1 Rating/5 Average
Monster Match Saga
Jan 10, 2016
Plays: 685

Monster Match Saga ScreenshotHere we have a bunch of monsters that need to be matched up. Look out for the bomb and spinning monsters that will cause special damage!

3 Ratings/4.6 Average
Fly Bird Fly
Jan 10, 2016
Plays: 516

Fly Bird Fly ScreenshotGuide your friendly Bird through the maze of pipes and other obstacles collecting the Stars in this cool arcade game inspired by the legendary Flappy Bird.

1 Rating/5 Average
Life In One
Jan 10, 2016
Plays: 602

Life In One ScreenshotYou are stranded on an Alien planet. Your goal is to build a space rocket and escape. Start by building units to create power and mine the metal patches. Build defenses to defend your base from the advancing Aliens and Zombies!

2 Ratings/3 Average
X Pool
Jan 02, 2016
Plays: 876

X Pool ScreenshotPlay Pool against the computer or battle against your friends in the online mode!

1 Rating/5 Average
Fruit Slicer
Jan 02, 2016
Plays: 526

Fruit Slicer ScreenshotSlice the fruit that is thrown up onto the screen. Slice the fruit into multiple pieces for maximum points!

1 Rating/5 Average