|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <body> |
|
4 <div> |
|
5 <canvas id="c1" width="400" height="400"></canvas> |
|
6 <canvas id="c2" width="400" height="400"></canvas> |
|
7 </div> |
|
8 <script type="text/javascript"> |
|
9 var canv1 = document.getElementById('c1'); |
|
10 var canv2 = document.getElementById('c2'); |
|
11 var ctx1 = canv1.getContext('2d'); |
|
12 var ctx2 = canv2.getContext('2d'); |
|
13 |
|
14 ctx1.strokeStyle = '#FF0000'; |
|
15 ctx1.moveTo(10, 10); |
|
16 ctx1.lineTo(390, 390); |
|
17 ctx1.stroke(); |
|
18 |
|
19 function doTest() |
|
20 { |
|
21 // Save img data |
|
22 var imgData = ctx1.getImageData(0, 0, canv1.width, canv1.height); |
|
23 |
|
24 // Resize canvas - seems to cause the bug |
|
25 canv1.width = 0; |
|
26 canv1.height = 0; |
|
27 canv1.width = 400; |
|
28 canv1.height = 400; |
|
29 |
|
30 // Put image data from ctx1 to ctx2 |
|
31 ctx2.putImageData(imgData, 0, 0); |
|
32 |
|
33 // Draw canvas2 on canvas1 |
|
34 ctx1.drawImage(canv2, 0, 0); |
|
35 }; |
|
36 |
|
37 doTest(); |
|
38 </script> |
|
39 </body> |
|
40 </html> |