1

I'm writing a small demo program to test canvas+ performance. But getImageData(), putImageData() don't seem to work. It leaves a black square on the canvas. Half size in width and height, of course considering the window.devicePixelRatio is 2, something not compatible must exist somewhere. The program works fine in Chrome browser. But won't work using Cocoonjs launcher 2.1.1.

Code:

I 'm using requestAnimationFrame(loop);

ctx.drawImage(origin_img,0,0,410, 180, 0, 0, width, height);
texture = ctx.getImageData(0,0,width,height);

loop{
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(0,0,width, height);
ctx.putImageData(texture, 0, 0);

}

The result is: I can see a red rectangle with a 1/4 size black rectangle over it. Can anyone help me with it?

ctx.drawImage() will work in the program.

==============================

Thanks both! I posted my code at
http://spikeyang.boxshell.com/static/js/src.zip

Please click the 3rd link, water_ripple to see the result. Please click top-right button to go back to home page. The main js file is js/demo.js. Main function is waterRippleLoop(). I am trying some water ripple sim code.

spikeyang
  • 691
  • 9
  • 17
  • Could you please provide the full >>working<< source code for chrome? Thank you. – Scdev May 15 '15 at 18:15
  • Please check the link of the code. Thanks! – spikeyang May 18 '15 at 08:10
  • Hey, i guess this is the Cocoonjs source code. Could you provide the "chrome" source code please as i want to port it to cocoonjs and test it on my own to be 100% sure. (Does not need to be the whole app just the problem but working code please) – Scdev May 20 '15 at 15:47
  • HI Scdev, Please check the code here. It can run in chrome browser. http://spikeyang.boxshell.com/static/js/src-code-20150521.zip – spikeyang May 21 '15 at 05:35

2 Answers2

0

I have used getImageData and putImageData in the past and they worked just fine in Canvas+. Some questions:

1.- Have you tested it on another Android device (or iOS device) using Canvas+ and did it work? 2.- Could you provide the whole example source code? The simpler the better.

Regards, Iker.

Iker Jamardo Zugaza
  • 176
  • 6
0

I have investigated the issue a bit further and did not get it working in 2.1 in any case. Nevertheless as you said it does work like charm with normal browsers like chrome.

Therefore i assume it's a bug in the latest cooconjs release and i will create a bug report to get more information about the problem.

To clarify things i have created a very small test case to show the problem: https://www.dropbox.com/s/j9zbjzhijxjxk54/test_case.zip?dl=0

In my test case 2 pictures should be displayed as i copy the one at the top with getImageData and display it again with putImageData.

Normal Browser (chrome): https://www.dropbox.com/s/782akzq2cguek2j/photo_2015-05-21_20-43-05.jpg?dl=0

Coocon (only one picture): https://www.dropbox.com/s/j20qnti0y3rw0gt/photo_2015-05-21_20-43-10.jpg?dl=0

Scdev
  • 373
  • 2
  • 13
  • Hi Scdev. I encountered another very similar problem: in Ludei's webGL demo apps, demo2, which is a rotating blue cube, if I add to index.html, then the webgl viewport seem to occupy 1/4 of the screen. Hope this can give some clues. – spikeyang May 22 '15 at 15:06