I'm trying to rotate a graphic from an image in javascript and so far I have not had much luck. I tried creating a separate canvas to do this but this has resulted in distorted images that seem to appear and disappear on the canvas. This is the function that I'm using right now:
function rotImage(img,deg){
var rotateImage;
var radDegrees = deg * (Math.PI/180);
var imageRotCanvas = document.createElement('canvas');
var imageRotCanvasCtx = imageRotCanvas.getContext('2d');
var rotWidth = Math.ceil(Math.abs((img.width * Math.cos(radDegrees)) + (img.height * Math.sin(radDegrees))));
var rotHeight = Math.ceil(Math.abs((-img.width * Math.sin(radDegrees)) + (img.height * Math.cos(radDegrees))));
imageRotCanvas.width = rotWidth*8;
imageRotCanvas.height = rotHeight*8;
imageRotCanvasCtx.rotate(radDegrees);
imageRotCanvasCtx.drawImage(img,0,0);
rotateImage = imageRotCanvas.toDataURL('image/png');
return rotateImage;
}
Is there a better way to do basic manipulation of 2d graphics? I'm learning Javascript for fun and so far GFX have been by biggest problem. If there's a library or something I'd be happy to use that. This is for a series of objects and not a single image. I'm going to have multiple images that will have to be rotated.
