670442-1.html (1054B)
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 doTest(); 39 </script> 40 </body> 41 </html>