Why do we need the html5 canvas element, when the same can be achieved through embedded svg?
Because we then do not need to worry about what support such embedding ;-)
In this fashion the focus for application developpers is to adhere to standards and let the client designers do the same. and hence spare everyone to worry about plug-ins, versions, security setups, etc...
SVG and canvas aren't really interchangeable technologies. SVG is a type of retained mode graphics where everything is drawn from a rather abstract model (the SVG document). Canvas on the other hand is a kind of immediate mode graphics, where there is no model and the client (JavaScript) must take care of redrawing, animations etc.
http://people.mozilla.com/~vladimir/xtech2006/ has nice comparison.
With canvas you don't have to deal with the DOM, which leads to faster and easier to write code. SVG is a mess as a specification, too...
SVG is a markup language for vector graphics and has DOM. This makes it very easy to alter the content after its creation.
Canvas is a painting surface just like MS Paint without an undo button. You cannot alter the content. You only can overpaint it. It is very performant because the browser does not need to handle a complete DOM for the image. And there is a possibility that canvas can handle 3D drawing in the future.
an illustration: My blog engine (blogger) doesn't support SVG (it's not a XHTML document). I wrote a tool converting SVG to the canvas element: http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html