Click here to Skip to main content
Rate this: bad
good
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
good
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:
http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm[^].
 
Such frame is nothing but 4 straight line segments (at worst, 8) of a couple of different shades of color, like white and gray.
 
—SA
  Permalink  
v3
Comments
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.
—SA
Rate this: bad
good
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;
context.fill();
  Permalink  

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



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