HTML5 Canvas Rotation

**SMTS** · 09-04-2011, 10:04 PM

Hi! I just can't seem to get this to work! You would not believe how much time I've spent with this. I want to rotate a shape on an HTML5 canvas. Preferably, a small amount (one degree) at a time. I don't seem to be getting it, though!

In the future, the arrow (that is on the HTML5 canvas) will move around the page, pointing to different items and explaining what they do. Like an interactive tutorial. The arrow, however, needs to be able to rotate before I add the rest of the code in (which is already written).

My only picky requests is No Jquery. There's a way to do this in HTML5.

It's slightly stripped down.

Here's the source:

functions.js

Code:

function drawArrow(a) {
	var canvas=document.getElementById("arrow");
  var c=canvas.getContext("2d");
	   c.strokeStyle="#002DAF"; //  line color
	   c.lineWidth=2; // line width
	   c.fillStyle="#E1E9FF"; // fill color
 
	   c.moveTo(39,12); // 1
	   c.lineTo(1,12); // 4
	   c.lineTo(1,63); // 4
	   c.lineTo(39,63); // 2
	   c.lineTo(74,38); // 3

	   //c.lineTo(400,100); // 5
 
	   c.closePath();	   
	   c.stroke();
	   c.fill();
	   c.fillStyle = "black";
     c.font = "20pt Arial";
	   c.fillText("?", 15, 47);
     if(a == 1) { tryrotate(20,document.getElementById('arrow').getContext('2d')); }
	}
	var position = 0;
function tryrotate(goal,ctx) {
  if(position < goal) {
    var rot = 5;
                //I'm Not Sure About This
                ctx.save();
                ctx.clearRect(0,0,72,72);
                ctx.translate(36,36); // to get it in the origin
                rotation +=1;
                ctx.rotate(90 * Math.PI/180); //rotate in origin
                ctx.translate(-72,-72); //put it back
                drawArrow();
                ctx.restore();
                //End Unsureness
    //draw after rotate                  
    position = position+rot;
    alert("hi");
    window.setTimeout("tryrotate(" + goal + ",document.getElementById('arrow').getContext('2d'))",250);
  } else {
    return true;
  }
}

Main.html

HTML Code:

<html>
<head>
<title>Javascript Animation Demo: Animation Sequence and Simultaneous Animation</title>
<style type="text/css">
.example-box {
 position:absolute;
 left:0px;
 top:0px;
 width:3em;
 background:#99ccff;
 text-align:center;
 font-family:"Helvetica neue",helvetica,tahoma,verdana,arial,sans-serif;
 font-size:1.5em;
 line-height:100%;
 color:#fff;
 cursor:pointer;
}
</style>
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript">
window.onload = function() {
	drawArrow(1);
}
</script>
</head>
<body>
	<div>
	 <h1>Javascript animation demo</h1>
	 <h2>View source for details</h2>
	 <div id="box" class="example-box" onclick="redoAnimationDemo()"><b>#box</b></div>
	</div>
	<canvas id="arrow" width="76" height="76"><span style="font-size:50pt;">&#8658</span></canvas>
</body>
</html>