Если я правильно понял ваш комментарий, вы либо хотите нарисовать изображение на холсте, либо преобразовать его в векторные данные, а затем нарисовать его на холсте.
Рисование изображения на холсте
Это на сегодняшний день самое простое решение.Преобразование растровых изображений в векторные данные - сложный процесс, включающий в себя сложные алгоритмы, и все же он не идеален.
Визуализация изображения на холсте на самом деле очень проста:
// Get the canvas element on the page (<canvas id="canvas"> in the HTML)
var ctx = document.getElementById('canvas').getContext('2d');
// Create a new image object which will hold the image data that you want to
// render.
var img = new Image();
// Use the onload event to make the code in the function execute when the image
// has finished loading.
img.onload = function () {
// You can use all standard canvas operations, of course. In this case, the
// rotate function to rotate the image 45 degrees.
ctx.rotate(Math.PI / 4);
// Draw image at (0, 0)
ctx.drawImage(img, 0, 0);
}
// Tell the image object to load an image.
img.src = 'my_image.png';
Преобразование растрового изображенияк векторным данным
Это сложный процесс, поэтому я не буду подробно рассказывать об этом.Прежде всего, вы можете отказаться от попыток реализовать это прямо сейчас, потому что это требует много работы.Тем не менее, есть приложения и службы, которые делают это для вас:
http://vectormagic.com/home
Работает отлично, но вам придется платить за большинство функций
Какконвертировать файлы SVG в другие графические форматы
Хороший список приложений, которые могут сделать это за вас
После этого вы можете сохранить векторные данные в формате SVG и использовать рендеринг SVG, который есть в некоторых браузерах.или библиотека, такая как SVGCanvas , для визуализации SVG на холсте.Вероятно, вы можете использовать эту библиотеку для преобразования полученного изображения в список операций контекста вместо того, чтобы каждый раз конвертировать из SVG.