Click here to Skip to main content
12,818,315 members (36,438 online)
Rate this:
Please Sign up or sign in to vote.
See more: HTML5
As i cannot attach any file here please follow my instructions to get to my issue.
1. Open your gmail account
2. Please select 'send feedback' under settings menu
3. Highlight any area using it

The highlighted section are div with raised border which gives it a 3D effect.
I am trying to create something like this but using HTML5 canvas element.Canvas methods allow us to create such rectangles but is there any way to provide such raised border 3D effect to my canvas rectangle??
Posted 8-Jan-13 3:17am
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

If this really needs to be HTML5 canvas, all you need it to draw some lines:[^].

Such frame is nothing but 4 straight line segments (at worst, 8) of a couple of different shades of color, like white and gray.

Marcus Kramer 8-Jan-13 10:41am
+5. Clean and simple.
Thank you, Marcus. I'm not sure that OP needs exactly that though, it was a rather formal answer.
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

context.rect(50, 50, 100, 100);
context.fillStyle = 'white';
context.shadowColor = 'black';
context.shadowBlur = 25;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170308.1 | Last Updated 9 Jan 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100