CODEWITHSUNDEEP
htmlcanvas
user802609
user802609

Reputation: 809

HTML5- What is the best way to move images that are already on a canvas

I decided last week that I wanted to play around with the Canvas. I am making a simple webapp (at my daughter's request), where there are ponies, and you can add them to your own picture and move them around.

I already have it so when a button is pressed, a picture of a pony comes up on the canvas.

My question now is, what is the best way to move multiple images when they are already on the canvas?

It would be great if I could drag them each, but I can only find tutorials using KineticJS, and I cannot get that to display how I want.

So, are there any other dragging images on Canvas tutorials out there?

Otherwise It would be okay to use keyboard buttons, but I cannot figure out how to do that with multiple images. When I use keyboard buttons, it moves all images at once.

Any ideas?

Upvotes: 3

Views: 794

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63892

You have to keep track of where you draw each one, clear the entire canvas, and redraw each and every one of them (presumably moving some of them in the process).

None of this is built in to Canvas. I have a tutorial on making the Canvas interactive that covers keeping track of, placing, and moving (selecting) shapes on a Canvas. There's a live demo on that page and source code at the bottom of the article.

Upvotes: 4

Related Questions