<html>
<head>
<script type="text/javascript">
function draw()
{
var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 =
document.getElementById('canvasBackBuffer').getContext("2d");
var img = new Image();
img.src = 'image.png';
img.onload = function()
{
ctx2.drawImage(img, 0, 0);
var imgData = ctx2.getImageData(0, 0, 200, 100);
ctx.putImageData(imgData, 0, 0);
}
}
</script>
</head>
<body>
<input id="Button1" type="button" onclick="draw()"
value="button" />
<canvas id="canvas" width="200" height="100"
style="border:solid;" />
<canvas id="canvasBackBuffer" width="200" height="100"
style="visibility:hidden;" />
</body>
</html>
Image display only if I click button twice. Or if I switch to other
window application (someone forgot to call invalidaterect? :) ).
What's wrong and how can I do a workaround?
Looks like it's bug 364885 ("Calling ctx.putImageData() doesn't
redraw")? Workaround seems to be set canvas.display.style to none and
setTimeout (0 ms) to show it again.
HTH,
--
Mook
mook dot moz plus stuff at gmail dot other stuff
Yeah, this's working as expected. But... too slow. In the bug that
your referenced (https://bugzilla.mozilla.org/show_bug.cgi?id=364885)
talking about some patch. Where can I download it?
You can use one canvas in place of an image in a drawImage() call in
another, and the performance should be good. The following works for
me in both Safari (2.0.4) and Firefox (2.0.0.1/Mac).
<html>
<head>
<script type="text/javascript">
function draw()
{
var ctx = document.getElementById('canvas').getContext("2d");
var can2 = document.getElementById('canvasBackBuffer');
var ctx2 = can2.getContext("2d");
var img = new Image();
img.src = 'image.png';
img.onload = function()
{
ctx2.drawImage(img, 0, 0);
ctx.drawImage(can2, 0, 0);
}
}
</script>
</head>
<body>
<input id="Button1" type="button" onclick="draw()" value="button" /
>
<canvas id="canvas" width="200" height="100"
style="border:solid;"></canvas>
<canvas id="canvasBackBuffer" width="200" height="100"
style="visibility:hidden"></canvas>
</body>
</html>
Hope this helps!
Raph