CODEWITHSUNDEEP
htmlcanvas
hampi2017
hampi2017

Reputation: 731

Canvas rectangle with 3D effect border

Canvas_Border

(Refer to image) First part of image shows div with raised borders(using -webkit-box-shadow,box-shadow properties). I want to give same effect to rectangle drawn using HTML5 canvas element. Is it any way to acieve this??

Upvotes: 0

Views: 2402

Answers (1)

Cerbrus
Cerbrus

Reputation: 72867

That's possible, try something like this:

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

Working Example

Upvotes: 4

Related Questions