Rotating javascript image

Question

I want to rotate an image IN javascript. The variable used for the image in javascript is heroImage. I am using jquery rotate, it works fine only when rotating images in html, but not in javascript. Normally it looks something like this

    $("#image").rotate(angle);

But that only works for images created in html.

This is part of the code im currently using

var heroImage = new Image();
heroImage.src = "images/hero.png";

and its drawn of canvas , if that helps. the problem is #image can only refer to a html div element afaik.

Answer 1

If the heroImage variable is a string that contains a file name, just create a new image and append it to the DOM before calling rotate(), f.ex:

var heroImage = 'one.jpg';
var image = new Image();
image.src = heroImage;
$('#image').append(image).rotate(angle);

EDIT If the #image element is supposed to be the IMG itself, try something like:

var heroImage = 'one.jpg';
var image = new Image();
image.src = heroImage;
document.body.appendChild(image); // or wherever you want to put it
$(image).rotate(angle);