Demo - Add Shadow and Opacity to Canvas Elements
Refer Tutorial
Add Shadow
<canvas id="shadow" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('shadow');
var context = canvas.getContext('2d');
var center_X = canvas.width / 2;
var center_Y = canvas.height / 2;
var radius = 80;
context.beginPath();
context.arc(center_X, center_Y, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#cb4025';
context.shadowColor = '#bde7f8';
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 10;
context.fill();
</script>
Add Opacity
<canvas id="opacity" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('opacity');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(250, 110, 60, 0, 2 * Math.PI, false);
context.fillStyle = '#ff5632';
context.fill();
context.globalAlpha = 0.3;
context.beginPath();
context.arc(320, 110, 60, 0, 2 * Math.PI, false);
context.fillStyle = '#205032';
context.fill();
</script>
Beginners guide to HTML5 Canvas - Draw shapes
Learn to draw Lines in Canvas
