lundi 20 avril 2015

Save coordinates of image drawn on canvas in a variable/object-HTML5

I need to get the coordinates of the last drawn shape so as to be able to apply transformations such as scaling, rotating etc. to it. This is the part of the code i used to draw the shape:

function drawPolygon(position, sides, angle) {
var coordinates = [],
    radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)),
    index = 0;

for (index = 0; index < sides; index++) {
    coordinates.push({x: dragStartLocation.x + radius * Math.cos(angle), y: dragStartLocation.y - radius * Math.sin(angle)});
    angle += (2 * Math.PI) / sides;
}

context.beginPath();
context.moveTo(coordinates[0].x, coordinates[0].y);
for (index = 1; index < sides; index++) {
    context.lineTo(coordinates[index].x, coordinates[index].y);
}

context.closePath();
context.stroke();
context.strokeStyle = strokeColor.value;

}

How can i save the coordinates for later use? Any help will be appreciated. Thanks.

Aucun commentaire:

Enregistrer un commentaire