Как срендерить SVG в Canvas?

Question

[SEOD]

Нашёл метод перенесения отрендеренной SVG картинки в Canvas:
https://jsfiddle.net/Wijmo5/h2L3gw88/
Но ни в каких браузерах у меня не смог запуститься этот код. Canvas - пуст. Может кто знает что не так или у кого-то завалялся работающий примерчик?

Answer 1

[0xD34F]

img.onload = () => canvas.getContext('2d').drawImage(img, 0, 0);

Comments

[SEOD]

Вроде проблема оказалась в том, что в SVG тэге не были прописаны xmlns-параметры. После этого и тот метод сработал. Но вот не подскажете ли, почему при таком методе картинка получается мутнее, чем в SVG? Можно ли это сглаживание отключать?

Вот тут есть пример: bl.ocks.org/biovisualize/raw/8187844 (первая - свг, далее канва, и img)

По тексту это особенно сильно заметно. Размеры я выставил пиксель в пиксель - одинаковые у канвы и SVG.

[0xD34F]

SEOD,

Вроде проблема оказалась в том, что в SVG тэге не были прописаны xmlns-параметры.

Да вроде нет. Загрузка картинки - операция асинхронная, надо использовать обработчик события load.

Но вот не подскажете ли...

Не подскажу.

[dom1n1k]

Но вот не подскажете ли, почему при таком методе картинка получается мутнее, чем в SVG?

Прямо точную причину не скажу, но вообще довольно известный факт, что HTML Canvas (он ведь появился еще 2000-х) в целом реализован с очень большим упором на перфоманс в ущерб качеству.
Можно попробовать побороться так: отрендерить канвас в 2-3-4 раза больше, а потом ресайз. Именно в ровное число раз, потому что алгоритмы ресайза у канваса... см. выше про перфоманс/качество. Лучше всего наверное в 4 раза, а потом 2-этапный ресайз по 2 раза каждый.

[RAX7]

По тексту это особенно сильно заметно.

На ретине смотришь? если да, то попробуй так https://www.html5rocks.com/en/tutorials/canvas/hidpi/