CODEWITHSUNDEEP
performancehtmlcanvasimage
BBog
BBog

Reputation: 3650

Canvas versus DOM - What is the most efficient image display method in HTML5?

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?

Upvotes: 7

Views: 3040

Answers (1)

Dunhamzzz
Dunhamzzz

Reputation: 14798

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.

Upvotes: 1

Related Questions