CODEWITHSUNDEEP
javascripthtmlimagecanvas
Sadie LaBounty
Sadie LaBounty

Reputation: 379

HTML Canvas & Javascript - Shadow Around Image Rather Than Border

I am trying to draw a shadow behind the border of a curved rectangle containing an image. The code below, however, puts the shadow behind the image rather than the border. How can I change this code such that the shadow is behind the border?

To clarify, the border is currently shadowed by the image shadow, but I do not want the image to have any shadow. It is the white border surrounding the image that I would like to have a shadow. I do not wish to have a shadow surrounding the canvas but the curved rectangular border within the canvas.

var c=document.getElementById('game'),
		canvasX=c.offsetLeft,
		canvasY=c.offsetTop,
		ctx=c.getContext('2d')
		elements = [];
    
var x=25, y=25, w=150, h=150;

var img=new Image(); 
img.src='https://i.sstatic.net/ddSWa.jpg';
ctx.beginPath();
ctx.lineWidth='8';
ctx.strokeStyle='white';
ctx.moveTo(x+10, y);
ctx.lineTo(x+w-10, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+10);
ctx.lineTo(x+w, y+h-10);
ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
ctx.lineTo(x+10, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-10);
ctx.lineTo(x, y+10);
ctx.quadraticCurveTo(x, y, x+10, y);
ctx.shadowColor = '#000000';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.stroke();
ctx.drawImage(img, x+2.5, y+2.5, w-5, h-5);
canvas {
  display: block;
  margin: 1em auto;
  border: 1px solid black;
  background: #FF9900;
}
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>uTalk Demo</title>
	<link rel='stylesheet' type='text/css' href='game.css' media='screen'></style>
</head>
<body>
	<canvas id="game" width = "200" height = "200"></canvas>
</body>
</html>

Upvotes: 0

Views: 1509

Answers (3)

Kaiido
Kaiido

Reputation: 136648

Simply remove the shadowOffset before drawing your image. When you set this property, all subsequent drawings will have a shadow.

var c=document.getElementById('game'),
		canvasX=c.offsetLeft,
		canvasY=c.offsetTop,
		ctx=c.getContext('2d')
		elements = [];
    
var x=25, y=25, w=150, h=150;

var img=new Image(); 
img.src='https://i.sstatic.net/ddSWa.jpg';
ctx.beginPath();
ctx.lineWidth='8';
ctx.strokeStyle='white';
ctx.moveTo(x+10, y);
ctx.lineTo(x+w-10, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+10);
ctx.lineTo(x+w, y+h-10);
ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
ctx.lineTo(x+10, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-10);
ctx.lineTo(x, y+10);
ctx.quadraticCurveTo(x, y, x+10, y);
ctx.shadowColor = '#000000';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.stroke();
// now reset the shadow
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;

ctx.drawImage(img, x+2.5, y+2.5, w-5, h-5);
canvas {
  display: block;
  margin: 1em auto;
  border: 1px solid black;
  background: #FF9900;
}
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>uTalk Demo</title>
	<link rel='stylesheet' type='text/css' href='game.css' media='screen'></style>
</head>
<body>
	<canvas id="game" width = "200" height = "200"></canvas>
</body>
</html>

Upvotes: 2

EricF
EricF

Reputation: 301

Not sure what you need. I don't see any problem with your code. Have you tried to use:

ctx.strokeStyle = 'grey'; //or the color you want.
ctx.lineWidth = 5; //For thickness

Upvotes: 0

Gaurav Chaudhary
Gaurav Chaudhary

Reputation: 1501

The shape you are drawing is just an image and not a border. It will only remain inside the canvas. But if you do something like this, you just need to play with the x,y coordinates. Otherwise, you can use border and box-shadow property

var c=document.getElementById('game'),
		canvasX=c.offsetLeft,
		canvasY=c.offsetTop,
		ctx=c.getContext('2d')
		elements = [];
    
var x= 20, y=20, w=160, h=160;

var img=new Image(); 
img.src='https://i.sstatic.net/ddSWa.jpg';
ctx.beginPath();
ctx.lineWidth='8';
ctx.strokeStyle='white';
ctx.moveTo(x+10, y);
ctx.lineTo(x+w-10, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+10);
ctx.lineTo(x+w, y+h-10);
ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
ctx.lineTo(x+10, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-10);
ctx.lineTo(x, y+10);
ctx.quadraticCurveTo(x, y, x+10, y);
ctx.shadowColor = '#000000';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.stroke();
ctx.drawImage(img, x+27.5, y+27.5, w-55, h-55);
canvas {
  display: block;
  margin: 1em auto;
  background: transparent;
}
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>uTalk Demo</title>
	<link rel='stylesheet' type='text/css' href='game.css' media='screen'></style>
</head>
<body>
	<canvas id="game" width = "200" height = "200"></canvas>
</body>
</html>

Upvotes: 0

Related Questions