Fatalist

It's a matter of when, not if.

I think it can't parse this color, so it ignores it. #F40 = #FF4400, but a 4-letter color can not be parsed, AFAIK.

Scale down your textures, use a texture atlas.

Using this: https://www.netlify.com/

Yes. render() is synchronous, nothing can run after you call it and before it returns. And requestAnimationFrame guarantees the GPU is done drawing as well. For canvas there is a similar trick with getImageData(), but requestAnimationFrame is better anyway. The way I understood, the problem is that he wants to have let's say a 2-second animation, but because initial rendering takes 1 second, he sees a frozen screen for 1 second and then only one second of animation.

That's the default size of a canvas element, you should set its .width and .height to 30.

Nice. Another thing that would be useful(and more straightforward in your case too), is to have an optional boolean parameter in BitmapData.update that tells it to not discard old data and just update the specified rectangle.

Great! Can't wait to see your game getPixel should work too, it's the same data under the hood.

It should be reliable, that's what requestAnimationFrame is for. Another way - use readPixels to force synchronization. Put this after .render() : renderer.gl.readPixels(0, 0, 1, 1, renderer.gl.RGBA, renderer.gl.UNSIGNED_BYTE, new Uint8Array(4)); - on the javascript side, but it can take some time before the GPU actually renders things on the screen.

You don't need to set it, they point to the same data anyway. In fact, you don't need destPixels/sourcePixels at all, just use .pixels property instead. Put this after copyBitmapData to see where do the pixels actually change: this.level.context.putImageData(this.level.imageData, 0, 0);

The pixels array is one-dimensional, so to get to pixel [x, y] you need the element at: y * width + x Have not tested it, but this should work: function copyBitmapData(source, dest, x, y) { var sourcePixels = new Uint32Array(source.data.buffer), destPixels = new Uint32Array(dest.data.buffer); for (var i = 0; i < source.height; i++) { var destRowStart = (y + i) * dest.width + x; for (var j = 0; j < source.width; j++) { var pixel = sourcePixels[i * source.width + j]; destPixels[destRowStart + j] = pixel; } } }

Create a smaller ImageData, update it and the copy its data pixel-by-pixel to the main ImageData.

See this answer: http://stackoverflow.com/questions/6773481/how-to-get-the-mouseevent-coordinates-for-an-element-that-has-css3-transform/7059054#7059054 I think that will give you the correct position and then use this function to find the clicked sprite: http://pixijs.download/release/docs/PIXI.interaction.InteractionManager.html#processInteractive

Try with a canvas renderer, and test some other benchmarks, like PIXI bunnymark.

In some situations. For example, if you use a BitmapData(and change it every frame), or text that you change every frame. Or if you use pre-2.7 Phaser and use a tilemap.