Get image line coordinates for canvas

Question

I just started working with canvas.

I need to simulate an image in a blank 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 get the coordinates of the image lines (for display)? So then, I could just use them and get a clean canvas image.

Answer 1

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

Drawing a picture on canvas

, , . - , .

:

// 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 .