0

getImageData is very bad for performance. I do not have a png or jpg file. So I make an image while my program is loading. I am developing an Application using the iPhone retina display. And I need your help with this :(

I need to make an Image at run time, in which I can re-use with a variable of some sort.

On the retina display, using a cache canvas will make the image either too pixelated or too large. Unless you know how to fix?

var x = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); //width of screen
var y = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); // height of screen

if (x === 414 && y === 736) {
    imgData = ctx.getImageData(0,0,3*x,3*365*Yf);
} else {
    imgData = ctx.getImageData(0,0,2*x,2*365*Yf);
}

ctx.clearRect(0, 0, x, 365 * Yf); // size of Image, retina display quality
ctx.putImageData(imgData, 0, 0);
Guðni Már Gilbert
  • 155
  • 1
  • 11
  • Sorry, what exactly is your question? Its hard to discern from the current wording. – Geuis Jan 07 '15 at 01:48
  • Yeah.. sorry for bad wording :P...`getImageData` and `putImageData` are bad performance, I need an alternative. – Guðni Már Gilbert Jan 07 '15 at 07:48
  • 1
    you could store the generated Images as HTMLImage, using a URLObject as src. This way you could use `drawImage` to draw it again… – philipp Jan 07 '15 at 08:00

1 Answers1

0

Using drawImage(canvas) is much faster than using putImageData

I'm not aware of any quicker method to getImageData though.

MacroMan
  • 2,335
  • 1
  • 27
  • 36