blob: 9a70460a68b54c1987a36f6d090628e7cb6286eb (
plain)
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<html>
<head>
<title>Check shadow rendering rect and image with source-in.</title>
<style type="text/css">
canvas { border: 1px solid #999; }
#source-canvas { display: none; }
</style>
</head>
<body>
<div>Test Rect</div>
<canvas id="canvas-for-color" width="200" height="200"></canvas>
<div>Test Image</div>
<canvas id="canvas-for-image" width="200" height="200"></canvas>
<canvas id="source-canvas" width="100" height="100"></canvas>
<script>
var canvas_color = document.getElementById("canvas-for-color");
var ctx_color = canvas_color.getContext("2d");
setupContext(ctx_color);
ctx_color.fillStyle = 'teal';
ctx_color.fillRect(100, 100, 100, 100);
var source_canvas = document.getElementById('source-canvas');
var source_ctx = source_canvas.getContext('2d');
source_ctx.fillStyle = 'teal';
source_ctx.fillRect(0, 0, 100, 100);
var canvas_image = document.getElementById("canvas-for-image");
var ctx_image = canvas_image.getContext("2d");
setupContext(ctx_image);
ctx_image.drawImage(source_canvas, 100, 100, 100, 100);
function setupContext(ctx) {
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'black';
ctx.fillRect(50, 50, 200, 100);
ctx.globalCompositeOperation = 'source-in';
ctx.shadowColor = 'blue';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = -10;
ctx.shadowOffsetY = -10;
}
</script>
</body>
</html>
|
