0
<!DOCTYPE html>
<html>
<head>
    <title>Canvas Cog</title>
    <script type="text/javascript">
        var cog = new Image();
        function init() {
            cog.src = 'needle.png'; // Set source path
            setInterval(draw,100);
        }
        var rotation = 0;
        function draw(){
            var ctx = document.getElementById('myCanvas').getContext('2d');
            ctx.globalCompositeOperation = 'destination-over';
            ctx.save();
            ctx.clearRect(0,0,500,500);
            ctx.translate(200,180); // to get it in the origin
            rotation +=1;
            ctx.rotate(rotation*Math.PI/180); //rotate in origin
            ctx.translate(0,-90); //put it back
            ctx.drawImage(cog,(-13.5),(-13.5),48,111);
            ctx.restore();
        }
        init();
    </script>
</head>
<body>
    <canvas width="500" height="500" id="myCanvas"></canvas>
</body>
</html>
thirtydot
  • 224,678
  • 48
  • 389
  • 349
Kundan SIngh
  • 720
  • 2
  • 12
  • 34

1 Answers1

1

using HTML5 Canvas - rotate image about arbitrary point

Community
  • 1
  • 1
Phil Brooks
  • 643
  • 4
  • 8