CODEWITHSUNDEEP
javascripthtmlcanvas
Raj
Raj

Reputation: 1935

Rotate an image on HTML5 canvas

I want to rotate an image on HTML5 canvas like this: http://webutils.co.uk/code/awc-image-rotater

Does anyone have an idea how I can do this?

I have been trying like this:

ctx3.drawImage(img3, -235, -142, 128, 128);  
ctx3.translate(151, 142);
ctx3.rotate(90 * Math.PI / 180);

But really not fulfilling my requirement. Any help will deeply appreciated.

Upvotes: 1

Views: 3029

Answers (1)

Brian Campbell
Brian Campbell

Reputation: 332776

You need to do the translation and rotation before you draw the image. You set the context to its rotated and translated position, then you do the drawing in that translated and rotated state.

You can see in the example that you linked to:

this._rotate_canvas( deg, [Tx, Ty] );
this._context.drawImage( this._img_copy, this._overflow_x, this._overflow_y, this._image_width, this._image_height );

_rotate_canvas: function( deg, aPoint )
{
    this._context.translate( aPoint[0], aPoint[1] );
    this._context.rotate( this.deg2rad(deg) );
    this._context.translate( -aPoint[0], -aPoint[1] );
}

Upvotes: 4

Related Questions