Develop Reference

How can I optimize HTML canvas and JavaScript to handle large sized images for a web-based image editor

I am building a web-based image editor, and everything seems to work fine until very large images are uploaded (>5mb), and then operations like adjusting the brightness using a slider takes a while to reflect. The issue is quite obvious, and that is because I have to loop through each pixel (step of 4) in context.getImageData().data in order to modify each pixel value.
I checked out a couple of already existing online image editors, and theirs seem to work pretty well without lags.
Initially, my first step was to resize the image to fit the canvas on the screen which worked fine without lags, but why I switched to modifying the original image size was because the original size does not change compared to the one on the screen which changes if the user resizes the screen (or if chrome displays the currently downloading bar at the bottom of the browser), and since it is constant, I can always keep track of all editing operations, and then display on the screen by basing scaling down to fit the screen.
I'd love to know how I can optimize for large-sized images, without losing the quality of the original (due to resizing etc). Thanks!
[UPDATED]
This was copied from a comment under this post.
"JavaScript is not suited for image pixels editing. That is what the GPU is for. Most image manipulation needs can be done using filters, standard 2D canvas as they use the hardware designed for the task. If you have custom PX manipulation needs then WebGL is the solution."

Canvas flickers if size is over 256px on Android (Cordova)

I'm developing a coloring mobile app using Cordova and the project https://github.com/theisensanders-wf/responsive-sketchpad
Everything works fine, but the canvas flickers if is not exactly 256px or less. I made some tests changing on the console the size with the Sketchpad.resize() function, and always over 256px the canvas starts flickering. I inserted it without modifications, on a document.ready listener as follows:
window.pad = new Sketchpad(document.getElementById('canvasDiv'));
By flicker I meant the lines seems to have an effect of being blurry and then rendered again, and that behavior repeats every 1 second.
I tried using requestAnimationFrame but that made the performance very poor in terms of refresh rate. It is a coloring app so it is important that the feeling of drawing feels real time.

I don't know if it still works but there's a plugin to improve canvas speed on android.
The only thing is that it hasn't been maintained for 4 years now...

Maximum Image/SpriteSheet Dimension for mobile phaser.js

I'm a newbee on this area.
I am currently developing card games. just for fun
on desktop i don't encounter problems on drawing portion of image on a sprite sheet to the canvas using Phaser-framework.
But when i move my application to open it on mobile browsers
like the Phaser cannot draw portion of the sprite sheet to the canvas because of the image being used is 1012 x 3324 in dimension;
Does anyone has any idea on what it the maximum sprite sheet for mobile browsers
im not having on trouble on chrome browser.
but when used firefox and android browser give me trouble.
ctx.drawImage gives NS_ERROR_NOT_AVAILABLE
Bug 574330 - NS_ERROR_NOT_AVAILABLE with canvas.drawImage and Image.onload
hope you could help me out.

i think you need to scale canvas to fit on any screen check this it might help

Scaling and touch interaction on Retina screens

I have a problem similar to one described in the following questions.
KineticJS : scaling issue while using custom clipFunc on 2x pixel aspect display
In my application: (please try on retina ipad vs normal ipad or desktop browser, even iOS simulator would also do)
There is are two canvas layers, one of them contains a blanket group that I scale with pinch-zoom gesture in the range of 0.5x to 1.5x
On the retina screen my canvas gets zoomed out to 1/4 the screen when at 0.5x
Now, with the change suggested in the comments, I managed to make it scale it properly however touch events are no longer scaled accordingly. Any ideas whats going on here?
Note that it is working perfectly on non-retina screens.
Am using KineticJS 4.4.3 - as its was an academic project that began early this year for proof-of-concept and now I'm continuing it to make a complete application.
Thanks!

My problem got solved after I upgraded to KineticJS 4.7.4
It however broke the clipping code I had as clipFunc was deprecated but that's a different issue which was resolved by resetting clip parameters on dragmove event.
Not an efficient solution but it works for now!

Mobile safari downsamples large images. How to retain?

I have an HTML page with a 1675px by 2640px image in it. I tried viewing it in an iPad and apparently mobile safari downsamples the images. We wanted to show a high quality image but safari restricts this.
I've been searching for a solution to retain the image size. I've been viewing it in iPad 3 on mobile safari. People are suggesting to use another browser but by default we are using mobile safari.
Are there any CSS, JavaScript or other solution to this restriction?

I'm sure you are just going to love this answer, but the short answer appears to be: "you aren't going to get 1:1 large sized images".
The slightly longer answer is that Apple intentionally forces things to work this way because before the way it worked was just to not load the image at all, or crash.
Now, for a fuller answer with citations...
Apple's Known Resoruces Limits
The thing is, when an image is decoded/decompressed it takes up a whole heck of a lot more RAM space than the images filesize. The formula Apple states is that devices with 512mb of RAM, like the ipad 3 you mention, will refuse non-JPEG images above 5 megapixels, which results in:
height * width <= 5 * 1024*1024
For JPEG, Apple notes they will subsample to allow you to view jpegs:
The maximum decoded image size for JPEG is 32 megapixels using subsampling.
JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.
Note that it states 2 megapixels is the limit for full-sized viewing of JPEG, which is 2*1024*1024. As your image is roughly a bit over 4 megapixels, it will be subsampled on iPad 3. And no, there really isn't anything you can do to force it without using an external program.
To use an external program for minimal improvement, see this link where a person recommends GoodReader: Apple Forum, Seeking Full Image Resolution in MiniSfari
And here is another Stackoverflow with a similar question/answer pair: Image Size Limitations in Mobile Safari

Mobile Safari does not downsample progressive JPEGs. Assuming JPEG is an acceptable format for your purposes, simply convert them to progressive encoding. Assuming you have an existing, non-progressive JPEG image, you can use a tool such as jpegtran to losslessly convert the encoding to progressive scan.

To enjoy the retina feature of iPad Retina and iPhone 4 / 5, use doubled size image as follow:
<img src="test.jpg" width="837" height="1320" />
Note the dimension is reduced to half, but the test.jpg does not require to resize.
Alternatively, you can prepare another set of high resolution graphics, and show it when retina screen is detected, using Media Queries ( Modernizr )
Pixel Density Theory: Retina screen puts 2 pixels into 1 pixel, e.g with 320px width, it actually contains 640px contents. Read more here: http://www.sitepoint.com/css-techniques-for-retina-displays/