JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8">
<head>
<title>Canvas Image Rotations</title>
</head>
<body>
</body>
</html>
CSS
canvas {
border : 1px gray solid;
}
JavaScript
var TO_RADIANS = Math.PI / 180;
var canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 200;
var context = canvas.getContext('2d');
document.body.appendChild(canvas);
var logoImage = new Image();
logoImage.src = 'http://dl.dropbox.com/u/5096013/demos/rotatedImages/logo.png';
var draw = function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
var targetX = 0;
var targetY = 0;
var halfWidth = logoImage.width / 2;
var halfHeight = logoImage.height / 2;
//
// Draw rotated image
//
targetX = 50;
targetY = 35;
context.save();
context.translate(targetX, targetY); // move the origin to 50, 35
context.translate(halfWidth, halfHeight); // move across and down half the width and height of the image
context.rotate(60 * TO_RADIANS); // rotate around this point
context.drawImage(logoImage, -halfWidth, -halfHeight); // then draw the image back and up
context.restore();
//
// Draw section of image
//
targetX = 250;
targetY = 35;
context.drawImage(logoImage, halfWidth, halfHeight, halfWidth, halfHeight, targetX, targetY, halfWidth, halfHeight);
//
// Draw section of image rotated
//
targetX = 450;
targetY = 35;
context.save();
context.translate(targetX, targetY);
context.translate(halfWidth, halfHeight);
context.rotate(60 * TO_RADIANS);
// Help needed HERE!!!!!
// draws full image rotated at half height
// context.drawImage(logoImage, -halfWidth, -halfHeight, halfWidth, halfHeight);
// draws nothing that is visible
//context.drawImage(logoImage, -halfWidth, -halfHeight, halfWidth, halfHeight, targetX, targetY, halfWidth, halfHeight);
context.restore();
};
setTimeout(draw, 600); // wait for image to load