Tutorial :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.


Solution: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

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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »