Wed, 31 Dec 2014 07:16:47 +0100
Revert simplistic fix pending revisit of Mozilla integration attempt.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Rounded rectangle clipping test</title>
5 <style>
6 .clipround {
7 left:100px;
8 top:100px;
9 position:absolute;
10 width:700px;
11 height:380px;
12 overflow:hidden;
13 border-radius:45px;
14 }
15 canvas {
16 position:absolute;
17 }
18 #nrcCanvas0 {
19 left:0px;
20 top:0px;
21 }
22 #nrcCanvas1 {
23 left:320px;
24 top:0px;
25 }
26 #nrcCanvas2 {
27 left:0px;
28 top:240px;
29 }
30 </style>
31 </head>
33 <body>
34 <div class="clipround">
35 <canvas id="nrcCanvas0" width="320" height="260"></canvas>
36 <canvas id="nrcCanvas1" width="320" height="260"></canvas>
37 <canvas id="nrcCanvas2" width="320" height="260"></canvas>
38 </div>
40 <script>
41 drawShapes('nrcCanvas0');
42 drawShapes('nrcCanvas1');
43 drawShapes('nrcCanvas2');
45 function drawShapes(elName) {
46 var ctxt = document.getElementById(elName).getContext('2d');
47 ctxt.fillStyle = '#00ff00';
48 ctxt.fillRect(0, 0, 300, 230);
49 }
50 </script>
51 </body>
52 </html>