Click here to Skip to main content
11,639,765 members (60,416 online)
Rate this: bad
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 2: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 at 8-Jan-13 10:41am
+5. Clean and simple.
Sergey Alexandrovich Kryukov at 8-Jan-13 10:46am
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
0 Suvendu Shekhar Giri 330
1 Sergey Alexandrovich Kryukov 204
2 CPallini 177
3 F-ES Sitecore 170
4 himanshu agarwal 167
0 OriginalGriff 9,081
1 Sergey Alexandrovich Kryukov 8,847
2 Mika Wendelius 7,027
3 Suvendu Shekhar Giri 2,650
4 F-ES Sitecore 2,558

Advertise | Privacy | Mobile
Web01 | 2.8.150731.1 | Last Updated 9 Jan 2013
Copyright © CodeProject, 1999-2015
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