Bonjour,

voici un code qui creer 3 carres, avec une ombre, ayant un cote en commun.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
 
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
 
		window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");
 
				ctx.beginPath(); 
				ctx.moveTo(100,100);
				ctx.lineTo(100,200);
				ctx.lineTo(200,200);
				ctx.lineTo(200,100);
				ctx.lineTo(100,100);
				ctx.closePath();
 
				ctx.fillStyle="white";
				ctx.shadowColor="green";
				ctx.shadowBlur=30;
				ctx.fill();
 
 
 
				ctx.beginPath(); 
				ctx.moveTo(200,100);
				ctx.lineTo(300,100);
				ctx.lineTo(300,200);
				ctx.lineTo(200,200);
				ctx.lineTo(200,100);
				ctx.closePath();
 
				ctx.fillStyle="white";
				ctx.shadowColor="red";
				ctx.shadowBlur=30;
				ctx.fill();
 
 
				ctx.beginPath();
				ctx.moveTo(300,100);
				ctx.lineTo(400,100);
				ctx.lineTo(400,200);
				ctx.lineTo(300,200);
				ctx.lineTo(300,100);
				ctx.closePath();
				ctx.stroke();
 
				ctx.fillStyle="white";
				ctx.shadowColor="black";
				ctx.shadowBlur=30;
				ctx.fill();
 
 
				            };
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="1200" height="600">
        </canvas>
 
    </body>
</html>
J'aimerai savoir comment faire pour que les ombres ne se superposent pas sur les carres.

D'avance merci