CODEWITHSUNDEEP
htmlhtml5-canvas
Bijoy Thangaraj
Bijoy Thangaraj

Reputation: 5546

Getting a reference to image loaded inside an HTML 5 Canvas

I am loading an image into an HTML 5 Canvas using drawImage method. How do I get a reference to that image later (maybe on some mouse-clicked event) so that I can do a transformation to the image (like rotation)?

Upvotes: 0

Views: 240

Answers (2)

Luis Medel
Luis Medel

Reputation: 463

Save a reference to the Image object you used to paint to the canvas.

Then,

  1. Delete the canvas (clearRect)
  2. Make the transformations using the canvas context
  3. Draw the Image again
  4. Go to 1 when you need to refresh the canvas

Upvotes: 1

robertc
robertc

Reputation: 75707

You can't. Once it's drawn on the canvas it's just pixels. No reference to the original source is retained by the canvas. If you want to maintain state information you have to do that yourself. Alternatively use SVG, that retains an internal DOM.

Upvotes: 1

Related Questions