HTML & CSS What’s the difference between img and canvas?

[Malcolm]

Hello,

I have seen the tag bounced away a couple times but not entirely sure what the difference is. But what’s the difference between img And canvas?

 

[Mathematical]

Hey there.

<img> Is what you use if at any moment you want to insert any kind of image. Whether it be a PNG, JPEG, GIF, or Bitmap. You will need to make sure that where you place the images that you want to load, are in the right directory that you link to.

For example:
<img="Project/Image1/Image1.png"> Will work, because you've referred to it in the directory that Image1 does exist in. But: <img="Project/Image2/Image1.png">, will not work because you've referred to an image that doesn't exist in the directory you've just linked to.

So as a result, make sure that the image you're linking to, does exist and is in the directory you say it's in.

In regards to <canvas>, I don't know much about. But what I do know, is that if you want to draw graphics on a web-page(Such as a red square), then that's what you use the <canvas> element for. W3Schools has tutorials about it: https://www.w3schools.com/html/html5_canvas.asp

Hope this clears things up.

 

[Malcolm]

Hey there.

<img> Is what you use if at any moment you want to insert any kind of image. Whether it be a PNG, JPEG, GIF, or Bitmap. You will need to make sure that where you place the images that you want to load, are in the right directory that you link to.

For example:
<img="Project/Image1/Image1.png"> Will work, because you've referred to it in the directory that Image1 does exist in. But: <img="Project/Image2/Image1.png">, will not work because you've referred to an image that doesn't exist in the directory you've just linked to.

So as a result, make sure that the image you're linking to, does exist and is in the directory you say it's in.

In regards to <canvas>, I don't know much about. But what I do know, is that if you want to draw graphics on a web-page(Such as a red square), then that's what you use the <canvas> element for. W3Schools has tutorials about it: https://www.w3schools.com/html/html5_canvas.asp

Hope this clears things up.

Hey,

Thank you for this! I was a little confused but you cleared it up!

 

[Mathematical]

Hey,

Thank you for this! I was a little confused but you cleared it up!

Varsågod(English: "You're welcome.")

 

[Ghost]

In regards to <canvas>, I don't know much about. But what I do know, is that if you want to draw graphics on a web-page(Such as a red square), then that's what you use the <canvas> element for. W3Schools has tutorials about it: https://www.w3schools.com/html/html5_canvas.asp

Just to add on to this, the canvas element is so incredible. It's not just for drawing red squares, it's for drawing anything, animating, and even creating games!
I made a couple games, but didn't perfect them
http://scanr.co/games/Geofall/ --- catch falling shapes for points. missing shapes causes you to lose points. It's very hard and easy to lose
Geofall uses HTML Canvas and JavaScript to generate shapes with random colors, size, and speed and then track the score.

http://scanr.co/games/Boss/ ---- a game I never finished. The concept was that you are a boulder than can roll, jump, and slam down on the ground... The boulder would be facing an Angry Miner boss that would constantly chase it and try to mine it for minerals.
The boulder Boss game generates pixels for grass, dirt, and gravel, and uses an actual image file for the boulder.

Anyways, I really just wanted to highlight the point further that img is wildly different than canvas. In fact, canvas can load several images at once and animate them as needed. So although canvas can be used to display one image, its purpose is obviously to do much more complex things.

 

[Malcolm]

Just to add on to this, the canvas element is so incredible. It's not just for drawing red squares, it's for drawing anything, animating, and even creating games!
I made a couple games, but didn't perfect them
http://scanr.co/games/Geofall/ --- catch falling shapes for points. missing shapes causes you to lose points. It's very hard and easy to lose
Geofall uses HTML Canvas and JavaScript to generate shapes with random colors, size, and speed and then track the score.

http://scanr.co/games/Boss/ ---- a game I never finished. The concept was that you are a boulder than can roll, jump, and slam down on the ground... The boulder would be facing an Angry Miner boss that would constantly chase it and try to mine it for minerals.
The boulder Boss game generates pixels for grass, dirt, and gravel, and uses an actual image file for the boulder.

Anyways, I really just wanted to highlight the point further that img is wildly different than canvas. In fact, canvas can load several images at once and animate them as needed. So although canvas can be used to display one image, its purpose is obviously to do much more complex things.

Wow damm thats amazing, I was play Geofall for a bit lets say I almost throw my computers