getImageData() performance

Question

All I need is to get the state of a single pixel on the canvas but I've noticed that it's horribly slow.

Here's my JS

var state = ctx.getImageData(x,y,1,1).data;
state = 'rgba(' + state[0] + ',' + state[1] + ',' + state[2] + ',' + state[3] + ')';
return state;

Is there an alternative to getting the state of a single pixel on the canvas?

No, there is not other method (that I know of). What you could try, is copying only that single pixel to another 1x1px canvas first (using drawImage), and then only get the imagedata of that … but whether this is gonna be any “faster” isn’t a given. — C3roe
– C3roe, Commented Feb 21, 2015 at 0:55

markE · Accepted Answer · 2015-02-21 01:27:58Z

1

So how is this magic pixel changing?

Since you're doing the programming, you should likely be able to notice the activities that would change that pixel.

For example if you (or the user) are moving something across that pixel which changes that pixel, then you would be able to predict the path of any object over the pixel (or notice the user is moving something over that pixel).

Anyway, if .getImageData is dragging down your performance, my suggestion would be to set up a .requestAnimationFrame loop and check for changes on that pixel at larger intervals. If you're checking every 1/60th of a second, maybe just check every 5/60th of a second.

answered Feb 21, 2015 at 1:27

markE

106k11 gold badges174 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

getImageData() performance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related