Skip to content

Instantly share code, notes, and snippets.

@kapitancho

kapitancho/demo.html

Created March 21, 2013 10:30
Show Gist options
  • Save kapitancho/5212088 to your computer and use it in GitHub Desktop.
Save kapitancho/5212088 to your computer and use it in GitHub Desktop.
Download ZIP
Rotate an image in a canvas
Raw
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
outline: solid 1px black;
}
</style>
</head>
<body>
<img id="pic" src="pointer-image.png" />
<canvas id="main" width="500" height="500" />
</body>
<script>
window.ctx = document.getElementById ('main').getContext ('2d');
window.img = new Image;
d = function (x,y,angle,ix,iy) {
ctx.translate (x+ix,y+iy);
ctx.rotate(angle);
ctx.drawImage(img,-ix,-iy);
ctx.rotate(-angle);
ctx.translate (-x-ix,-y-iy);
}
img.onload = function() {
d(50,50,0,12,33);
d(50,50,90*Math.PI/180,12,33);
d(50,50,-90*Math.PI/180,12,33);
}
img.src = document.getElementById ('pic').src;
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment