mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-08 20:47:44 +00:00
42 lines
1.0 KiB
HTML
42 lines
1.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<canvas id="c1" width="400" height="400"></canvas>
|
||
|
|
<canvas id="c2" width="400" height="400"></canvas>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var canv1 = document.getElementById('c1');
|
||
|
|
var canv2 = document.getElementById('c2');
|
||
|
|
var ctx1 = canv1.getContext('2d');
|
||
|
|
var ctx2 = canv2.getContext('2d');
|
||
|
|
|
||
|
|
ctx1.strokeStyle = '#FF0000';
|
||
|
|
ctx1.moveTo(10, 10);
|
||
|
|
ctx1.lineTo(390, 390);
|
||
|
|
ctx1.stroke();
|
||
|
|
|
||
|
|
function doTest()
|
||
|
|
{
|
||
|
|
// Save img data
|
||
|
|
var imgData = ctx1.getImageData(0, 0, canv1.width, canv1.height);
|
||
|
|
|
||
|
|
// Resize canvas - seems to cause the bug
|
||
|
|
canv1.width = 0;
|
||
|
|
canv1.height = 0;
|
||
|
|
canv1.width = 400;
|
||
|
|
canv1.height = 400;
|
||
|
|
|
||
|
|
// Put image data from ctx1 to ctx2
|
||
|
|
ctx2.putImageData(imgData, 0, 0);
|
||
|
|
|
||
|
|
// Draw canvas2 on canvas1
|
||
|
|
ctx1.drawImage(canv2, 0, 0);
|
||
|
|
};
|
||
|
|
|
||
|
|
doTest();
|
||
|
|
doTest();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|