-1

I poked around Stack and found some examples that haven't worked for me. I made a simple HTML canvas with a circular image with an arrow inside it. I want the circle (image) to point toward the mouse. I think the degree to rotate is wrong, so feel free to correct me on that. But the bigger problem is how to rotate the image. I tried using document.getElementById("circleImg").css('transform', 'rotate('+angle+'deg)'); but it gives the error that "circleImg" is null.
here is the link to my fiddle ~ http://jsfiddle.net/Jsbbvk/Mr4Tz/110/

Thank you in advance!

Jsbbvk
  • 180
  • 2
  • 19

1 Answers1

0

Your main problem is that with a Canvas you don't really have objects that can be called upon after they are draw. It's just like you have a physical pen and paper. once you draw something, it's stuck there on the paper. to change it, you will need to erase it. or paint overtop the pen drawing and redraw something new.

so document.getElementById("circleImg") does not work because there is no object on the webpage by that name. Just a pen drawing on your canvas.

what you're going to need to do it redraw the image overtop of the last one, but rotated. you are already redrawing so just add a section of code that rotates your canvas for you.

I think the answer to This Question is pretty simple and should do the trick.

OR, depending on your final plan. You could use SVG instead of canvas. they both have their pros and cons. but SVG creates actual DOM elements that javascript and do work on. so getElementById() would work on an SVG drawing.

tyler mackenzie
  • 622
  • 7
  • 18