6 ms·
Very cool, but a few notes to anyone getting their hopes up on the powers of Canvas: As you may have anticipated, this demo runs at less than 1 frame per secon
by gavanwoolery 14y ago
Very cool, but a few notes to anyone getting their hopes up on the powers of Canvas:
As you may have anticipated, this demo runs at less than 1 frame per second on my Nexus 7. :/
In terms of per-pixel manipulation of a Canvas, it is very slow, even with javascript's (not very well supported) typed arrays. Simply put, multidimensional loops (unrolled or not) will always kill performance in JS with any significant dimensions. I learned this the hard way by trying to write a pixel-based GUI, and even that (with some crazy optimizations) could not render fast enough for all devices. If you are just doing blits, Canvas works very well (especially since this operation often uses the GPU).
For now, I think the best option is still WebGL, even though it is not widely supported yet, mobile devices are beginning to pick it up (Blackberry, for example).
- hornbaker 14y agoRuns about 6-7 fps on my iPhone 5.
- gavanwoolery 14y agoNice :) Shows you how fast ARM is progressing...
- hornbaker 14y agoBut only 4-5 fps on my iPad 3. Hmmmph, thought that'd be faster.
- manmal 14y agoMy iPhone 5 is considerably smoother and faster than my iPad 3. That's surely also related to the iPad's insane pixel count, but the iPhone also loads and switches apps faster, before CPU-based rendering is a factor.
- svachalek 14y agoNote also that he's got his canvas set to half the CSS size, i.e. each canvas pixel is 4 screen pixels on a normal display. On a retina display each canvas pixel will be 16 screen pixels. So if you tried to manipulate real pixels this way on those devices it wouldn't be pretty. (Retina version: http://jsfiddle.net/RFLaW/ http://jsfiddle.net/RFLaW/)