CODEWITHSUNDEEP
javascriptimage-rotation
none
none

Reputation: 9

Rotating an image made in javascript

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.. The answer that im not looking for is this:

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

Because that only works for html images

Its for a game, so everything has to be in javascript , anything css related doesnt seem to work. It also has to be IE9 compatible

Upvotes: 0

Views: 6504

Answers (3)

Sreedhar M B
Sreedhar M B

Reputation: 189

Firstly add 'id' property to image

heroImage.id = 'image';

and add css for the 'image' as follows

$('#image').css('transform', 'rotate('+angle+'deg)');

here is detailed discussion on acheieving this

Upvotes: 0

Jakub Matczak
Jakub Matczak

Reputation: 15656

You can use CSS3 for this job. 

img.rotated {
    transform: rotate(30deg);
}

As an example you can look into FontAwesome's CSS

http://fortawesome.github.io/Font-Awesome/examples/#rotated-flipped

If you have to use javascript, use can change CSS via JS.

document.getElementById('img.rotated').style.transform = rotate(30deg);

Upvotes: 0

Artek Wisniewski
Artek Wisniewski

Reputation: 797

You can draw it on canvas and then rotate scene in canvas

ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 4);

or, rotate whole canvas using CSS3 transforms

document.getElementById('#canvas').style.webkitTransform = "rotate(45deg)";

Upvotes: 1

Related Questions