Next »
1041/1956
« Previous

Draw a line with shadow on HTML5 Canvas in JavaScript

Description

The following code shows how to draw a line with shadow on HTML5 Canvas.

Example


<html>
<head>
<script>
window.onload = function(){<!-- ww w .  j ava  2  s  .co  m-->
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var width  = 60;
var height = 75;
var gap    = 50;

context.strokeStyle   = "red";
context.lineWidth     = 20;
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur    = 7;
context.shadowColor   = "gray";

//       xStart yStart cap
drawLine(25,    25,    "butt"  );
drawLine(25,    75,    "square");
drawLine(25,    125,   "round" );

//       xStart       yStart join
drawJoin(175,         120,   "miter");
drawJoin(175+50+60,   120,   "bevel");
drawJoin(175+100+120, 120,   "round");

function drawLine(xStart, yStart, cap)
{
context.lineCap = cap;

context.beginPath();
context.moveTo(xStart,           yStart);
context.lineTo(xStart+1.5*width, yStart);
context.stroke();
}
function drawJoin(xStart, yStart, join)
{
context.lineCap  = "round";

context.beginPath();
context.moveTo(xStart,           yStart);
context.lineTo(xStart+(width/2), yStart-height);
context.lineTo(xStart+width,     yStart);
context.lineJoin = join;
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>

Click to view the demo

The code above generates the following result.

Draw a line with shadow on HTML5 Canvas in JavaScript
Next »
« Previous