0

I have an Image object like below:

imgObj = new Image();
imgObj.src = "http://localhost/images/img1.png";
imgObj.onload = function () {}

and I want to draw this image on a canvas when a button clicked. In each click the image draws on it but I want to rotate object before drawing because I don't want the result fall over and I need it seen differently.

I'm using javascript and jQuery in my project. so is there any solution for this?

Behnam Azimi
  • 2,260
  • 3
  • 34
  • 52
  • Rotating the image (by creating a seperate canvas and rotating it on that) will reduce the image quality. You are best off rendering the original to the canvas using the canvas transform to rotate. This will ensure you get the best quality each time you render it. – Blindman67 Dec 20 '17 at 21:23
  • @Blindman67, I'm using clip in my canvas and when I rotate the context it hide under clip. Imagine that I have circle clipped canvas and when I rotate it, the content goes under clipped layer. – Behnam Azimi Dec 20 '17 at 21:50
  • You will have to show the code involved. There is no reason to ever have to pre rotate an image unless you are saving it rotated. – Blindman67 Dec 21 '17 at 01:17

1 Answers1

-1

This should work:

imgObj.style.transform = "rotate(90deg)"

It sets the transform css style property on the image object.

t.888
  • 3,862
  • 3
  • 25
  • 31