Menu
StackOverflow users
While making a html5 application/website, for such cases as an image gallery, where a large number of images are displayed sequentially or at the same time in the browser, is the use of the canvas element justified?
As long as we are only talking about presenting an image, is there any point in using a canvas and drawing the image on it instead of using the DOM element < img > tag? There will also be some image manipulation, like CSS3 transformations/moving/scaling/zooming and gesture recognition (drag, touch/tap, maybe pinch, etc.) which, as far as I know, are applicable to both the canvas and the img tags.
It would also be important to keep things as much "html5"-ish as possible and also taking performance into account. For example, it would matter if in the future the canvas element will be more and more used and optimized by the browsers and it would also matter if for the time being the < img > is much faster.
Since we are considering developing an universal html5 application, working on desktops and also on mobile devices, performance and speed are a very important factor. However, the tests comparing canvas and < img > were targeting mostly javascript browser games. In this case, the animation is not that important as the memory consumption and overall performance.
Are there any resources/studies regarding this particular aspect?
509
In sum, the overhead of DOM rendering is more poignant when juggling hundreds if not thousands of objects; in this scenario, canvas is the clear winner. However, both the canvas and SVG are invariant to object sizes. Given the final tally, the canvas offers a clear win in performance.
Canvas Is Useful Even if You Never Planned to Use Flash The CANVAS element allows you to add so much more interactivity to your web pages because now you can control the graphics, images, and text dynamically with a scripting language.
SVG gives better performance with smaller number of objects or larger surface. Canvas gives better performance with smaller surface or larger number of objects. SVG can be modified through script and CSS.
UseCanvas = NeedCanvas ? true : false
You really don't need canvas for this operation, and it will take longer to develop with canvas as it's a lot more complicated.
Using <img> tags with javascript will not only increase compatibility but speed and accessibility too - absolutely everything with a browser can run CSS and Javascript. Additionally there's SEO factors too, I'm pretty sure the images in a canvas won't get indexed.
Don't use HTML5 technology for the sake of using HTML5 technology. When you want to start warping the images and having the user draw on them so you can export/save, that's where you need canvas.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
