Get image line co-ordinates for canvas

Question

I just started to work with canvas.

I need to simulate some image in pure canvas.

image => tool => [1, 20, 80, 45.....] => canvas => canvas render image
some picuture    coordinates       this picture but rendered(created) via canvas 

Are there any tools that help to get image lines coordinates (to map)? So, next, I could just use them, and get a pure canvas image.

Answer 1

If I understood your comment correctly, you either want to draw an image onto a canvas, or convert it to vector data and then draw that on the canvas.

Drawing an image on a canvas

This is by far the simplest solution. Converting raster images to vector data is a complicated process involving advanced algorithms, and still it's not perfect.

Rendering an image on a canvas is actually very simple:

// 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';

Converting a raster image to vector data

This is a complicated process, so I won't give you the whole walkthrough. First of all, you can give up on trying to implement this yourself right now, because it requires a lot of work. However, there are applications and services that do this for you:

http://vectormagic.com/home
Works great, but you will have to pay for most of the functionality

http://stackoverflow.com/questions/1019462/how-to-convert-svg-files-to-other-image-formats
A good list of applications that can do this for you

After this, you can store the vector data as SVG and use the SVG rendering that some browsers have, or a library such as SVGCanvas to render SVG onto a canvas. You can probably use that library to convert the resulting image to a list of context operations instead of converting from SVG every time.