Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Canvas. ImageData bug

10 views
Skip to first unread message

mika

unread,
Jan 30, 2007, 4:32:00 PM1/30/07
to
getImageData and putImageData work with some strange effects. Below my
code that illustrate what I'm talking about:

<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?

Mook

unread,
Jan 31, 2007, 3:33:33 PM1/31/07
to
mika wrote:
> getImageData and putImageData work with some strange effects. Below my
> code that illustrate what I'm talking about:
>
<snipped code>

>
> 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

mika

unread,
Feb 1, 2007, 10:52:00 AM2/1/07
to
>
> 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.
>

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?

raph....@gmail.com

unread,
Feb 21, 2007, 1:29:25 AM2/21/07
to

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

0 new messages