CODEWITHSUNDEEP
htmlhtml5-canvas
gikygik
gikygik

Reputation: 421

Get image coordinates on HTML5 canvas?

I am trying to build a feature on a website where the user can click and drag images onto an HTML5 canvas and they can "save" the canvas on the click of the button. It's not really going to save everything I am going to get the coordinates of each image and save the coordinates. How do I get the coordinates of each image?

Upvotes: 1

Views: 4270

Answers (1)

user1693593
user1693593

Reputation:

You will need to wrap the drawn images into some sort of object which contains the data you need to extract later.

You can store position and dimension and use that to check for clicks, and when a click is postively identified you pass the position for the object as a result.

This implies also that you need to update this object every time you move the image around.

A simple object could be:

function canvasImage(x, y, img) {
    this.image = img;
    this.x = x;
    this.y = y;
    this.width = img.width;
    this.height = img.height;
    return this;
}

Then when you have loaded your image:

var canvasImage1 = new canvasImage(50, 70, img);

Now you just update this object when it is moved around and you use it to read dimension and the actual image as well.

Upvotes: 3

Related Questions