Question

I’m getting stated with HTML5.

When I load images onto a browser, i can use normal HTML <img> tag, and in HTML5, I can also use – canvas- drawImage().

I don’t known what is the differences between <img> and drawImage() when load webpages in browser.

Anyone can make me clear???

Answer 1

The <img> tag takes an image source and places it in your DOM. The DOM element can then be selected from your document object model with JavaScript and it can be modified (attributes can be added or removed, source can be changed, etc.)

drawImage() takes pixel data and visualizes it in a <canvas> element. Afterwards only the canvas element can be interacted with (selected with javascript). The pixel data can be modified but you cannot utilize attributes like title, alt, etc. out of the box like you could with the <img> tag.

Use the <img> tag if you would like simply to render images inside your web page. Use the <canvas> if you want to interact with the images after they have been rendered and you want to perform modifications to the pixel data (for example to draw on top of the image).

Example:

<img>:

<!-- When hovered it would display a tooltip saying "This is an image" -->
<img id="test" src="some/src.png" alt="error" title="This is an image" />
<!-- The image will fit precisely in it's container -->

Canvas:

// In this example if the canvas dimensions are larger/smaller
// than the image dimensions, the image will be clipped or
// it would not fill the entire space
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("test");
ctx.drawImage(img, 0, 0); // On hover nothing will show
// unless you implement a custom tooltip functionality