Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

Canvas. ImageData bug

11 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