Как нарисовать тень на объекте Canvas?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var objectWidth = 100;
var objectHeight = 100;
var objectColor = 'red';

// draw object
context.fillStyle = objectColor;
context.fillRect(50, 50, objectWidth, objectHeight);

// create a new canvas for the shadow
var shadowCanvas = document.createElement('canvas');
var shadowContext = shadowCanvas.getContext('2d');
shadowCanvas.width = objectWidth;
shadowCanvas.height = objectHeight;

// set object to be transparent
context.globalAlpha = 0.5;

// draw shadow
var gradient = shadowContext.createLinearGradient(0, 0, 0, objectHeight);
gradient.addColorStop(0, 'rgba(0, 0, 0, 0.3)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
shadowContext.fillStyle = gradient;
shadowContext.fillRect(10, 10, objectWidth, objectHeight);

// display shadow on top of object
context.drawImage(shadowCanvas, 50, 50);