Modifying array after putImageData() sometimes modifies visible output
Reported by
underska...@gmail.com,
Nov 27
|
||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.62 Safari/537.36
Steps to reproduce the problem:
canvas_data = canvas.createImageData(1024, 1024)
canvas_color = new Uint32Array(canvas_data.data.buffer)
main = function {
canvas_color.fill(magenta)
do roughly 5 ms work
canvas_color.fill(dark grey)
canvas.putImageData(canvas_data, 0, 0)
do either requestAnimationFrame(main) or setTimeout(main)
}
1. create a page with a <canvas>
2. run the pseudo-javascript
3. try using rAF or setTimeout
What is the expected behavior?
Canvas should never be magenta. (When using rAF, the canvas is never magenta, as expected.)
What went wrong?
When using setTimeout, the canvas is magenta around 30-50% of the time, causing severe flashing.
Did this work before? N/A
Chrome version: 71.0.3578.62 Channel: beta
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version:
I haven't tested the pseudocode, and my real code is way longer.
,
Nov 27
It seems it's my code causes the issue. On closer inspection, it looks more like this:
canvas_color.fill(magenta)
if (at least 1/60 seconds since last time we did work) {
do roughly 5 ms work
canvas_color.fill(dark grey)
}
canvas.putImageData(canvas_data, 0, 0)
When using requestAnimationFrame(), chrome targets 60 calls per second or lower, which means the if-clause always evaluates to true. With setTimeout, that's not the case, and the canvas will obviously be magenta on some frames.
Sorry for bothering you.
,
Nov 28
,
Nov 28
underskatten@ Thanks for the issue. Request you to provide a sample File/URL where this issue can be reproduced, which will help in further triaging. Thanks...
,
Dec 3
|
||||
►
Sign in to add a comment |
||||
Comment 1 by cbiesin...@chromium.org
, Nov 27