Can someone explain how to use the canvas tag?

Question

I cant differentiate it from the svg element

Answer 1

HTML5 Canvas is simply a drawing surface for a bit-map.
You set up to draw (Say with a color and line thickness), draw that thing, and then the Canvas has no knowledge of that thing: It doesn't know where it is or what it is that you've just drawn, it's just pixels. If you want to draw rectangles and have them move around or be selectable then you have to code all of that from scratch,including the code to remember that you drew them.

SVG on the other hand must maintain references to each object that it renders. Every SVG/VML element you create is a real element in the DOM. By default this allows you to keep much better track of the elements you create and makes dealing with things like mouse events easier by default, but it slows down significantly when there are a large number of objects
Those SVG DOM references mean that some of the footwork of dealing with the things you draw is done for you. And SVG is faster when renderingreally largeobjects, but slower when renderingmanyobjects.

A game would probably be faster in Canvas. A huge map program would probably be faster in SVG.Canvas would be better for faster things and heavy bitmap manipulation (like animation), but will take more code if you want lots of interactivity.

- Simon Sarris

Answer 2

I get it now. @agus mei I appreciate