On the topic of SVG and Canvas, I think it would be really useful if Canvas had a method similar to drawImage but instead could draw svg.
for example
var circle = document.createElementNS("http://www.w3.org/2000/svg, "circle");
circle.setAttribute("style", "fill:green");
circle.setAttribute("cx", 50);
circle.setAttribute("cy", 50);
circle.setAttribute("r", 25);
ctx.drawSvg(circle,x,y,w,h);
I think then we could have the best of both worlds, define complex shapes in svg, but use canvas for rendering. The advantage over just using svg is that every shape is in the dom, so if you want to draw 1000 similar shapes the dom gets cluttered.
for example
var circle = document.createElementNS("http://www.w3.org/2000/svg, "circle"); circle.setAttribute("style", "fill:green"); circle.setAttribute("cx", 50); circle.setAttribute("cy", 50); circle.setAttribute("r", 25);
ctx.drawSvg(circle,x,y,w,h);
I think then we could have the best of both worlds, define complex shapes in svg, but use canvas for rendering. The advantage over just using svg is that every shape is in the dom, so if you want to draw 1000 similar shapes the dom gets cluttered.