Here, we will be using our first recipe. Just a few properties are set and we get a different output as shown:
Notice the difference between this and the output of the first recipe. Here you will notice a shadow for each line.
We use a few shadow-related properties to build this recipe:
<html>
<head>
<title>Line Shadow</title>
<script type="text/javascript">
var can;
var ctx;
function init() {
can = document.getElementById("MyCanvasArea");
ctx = can.getContext("2d");
drawLine(30,30,300,30,20,"orange","butt"); //default cap style
drawLine(30,80,300,80,20,"crimson","round");
drawLine(30,130,300,130,20,"teal","square");
}
function drawLine(xstart,ystart,xend,yend,width,color,cap)
{
ctx.beginPath();
ctx.strokeStyle=color;
ctx.lineWidth=width;
//adding shadow
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 7;
ctx.shadowColor = "gray";
//shadow properties set above
ctx.lineCap=cap;
ctx.moveTo(xstart,ystart);
ctx.lineTo(xend,yend);
ctx.stroke();
ctx.closePath();
}
</script>
</head>
<body onload="init()">
<br/><br/>
<center>
<canvas id="MyCanvasArea" width="320" height="200" style="border:3px solid brown;">
</canvas>
</center>
</body>
</html>