3

I have problem with one native HTML5 canvas function getImageData() on Mac OS. I run test for this function in jsperf with a similar power processors and result is:

Ubuntu 14.04 - chrome/opera: 300k operations/sec

Window 7/8/8.1 - chrome/opera/ie/mozilla: around 250k operations/sec

Mac OS - safari/chrome/opera: around 1k operations/sec

use getImageData for better performance need use x,y only as variable integer values, second two parameters for better performance recommend use as 1px

var ctxData=canvasContext.getImageData(x,y,1,1); 
rgba = ctxData.data; 
/* rgba[0] = red channel, rgba[1] = green channel, rgba[2] = blue channel, rgba[3] = alpha channel */

I found in the forum discussed how to optimize this function: http://w3facility.org/question/javascript-canvas-buffer-slow-performance-on-ios-safari-and-chrome/

the main thing was offered:

– cache canvas.width and canvas.height to avoid DOM access, just create ONE imageData that you keep on modifying (relieves the g.c.).

Would look something such as get static full canvas image data and use it, but i cannot use all the time static canvas data, because i create like a paint application while drawing every moment changing canvas context. Maybe somebody can anything to offer?

Paulius Sapragonas
  • 176
  • 8

1 Answers1

2

I Highly recommend sending such works (image and or other intense data manipulations for example) to a web worker you you won't clog your call stack and your application's responsiveness.

Web Workers on HTML5 Rocks helped me figure out how to use web workers for image transformations without making your paint application be stuck.

You can also check out the Web Worker Documentation on MDN if you're into that.

Elia Grady
  • 468
  • 3
  • 16