Этот ответ скопирован из моего ответа на другой вопрос.Но затем ОП изменил вопрос, и поэтому этот ответ стал менее актуальным для него.ИМХО, он более уместен в этом вопросе, поэтому здесь идет речь:
Думайте о разнице между canvas и svg как о разнице между Photoshop и Illustrator (или Gimp и Inkscape для вас, OSS, люди).Один имеет дело с растровыми изображениями, а другой - с векторной графикой.
С помощью canvas, поскольку вы рисуете в растровом изображении, вы можете легко размазывать, размыть, прожигать, уклоняться от изображений.Но поскольку это растровое изображение, вы не можете легко нарисовать линию, а затем принять решение о ее изменении.Вам нужно удалить старую линию, а затем нарисовать новую линию.
С помощью svg, поскольку вы рисуете векторы, вы можете легко перемещать, масштабировать, вращать, перемещать, переворачивать рисунки.Но так как это векторы, вы не можете легко размывать края в соответствии с толщиной линии или плавно соединять красный круг в синий квадрат.Вам необходимо смоделировать размытие, рисуя промежуточные многоугольники между объектами.
Иногда их варианты использования перекрываются.Например, многие люди используют canvas для создания простых линий и отслеживания объектов в виде структур данных в javascript.Но на самом деле они оба служат разным целям.Если вы попытаетесь реализовать векторное рисование общего назначения в чистом javascript поверх холста, я сомневаюсь, что вы будете быстрее, чем использовать svg, который, скорее всего, реализован в C.