Capt. Horatio T.P. Webb
HTML 5 -- CANVAS EXAMPLE -- ROTATIONS

Parks -- Fall 2013

Methods:
name_for_the_canvas_context.rotate(angle)angle is in radians

radians = degrees*180.0/Math.PI

name_for_the_canvas_context.clearRect(0,0,w,h);clears the contents of the canvas

w = width of the canvas
h = height of the canvas

Here is a canvas:

<canvas id="rot_example" width="500" height="500""></canvas>

HTML 5 Canvas is NOT supported by this browser

Here is the code: 

var rotex = document.getElementById("rot_example");
var rotc = rotex.getContext("2d");
var faceimg=new Image();
faceimg.src="captsm.jpg";
//
// *** draw center cross hairs
//
rotc.moveTo(250,240);
rotc.lineTo(250,260);
rotc.stroke();

rotc.moveTo(240,250);
rotc.lineTo(260,250);
rotc.stroke();

// draw the image, a rectangle and some text in the upper left quadrant

rotc.rect(200,210,200,30);
rotc.drawImage(faceimg,100,100);
rotc.strokeText("                   Originally NO Rotation",235,225);
rotc.stroke();


// draw the image, a rectangle and some text in the lower left quadrant

rotc.rect(10,410,300,40);
rotc.drawImage(faceimg,10,300);
rotc.strokeText("20 rotations -- 4.5 degrees each = 90 degrees total",15,425);
rotc.strokeText("Center is the lower right hand corner of the original image",15,440);
rotc.stroke();

//  rotate the redraw upper quandrant elements

rotc.save();
rotc.translate(250,250)
rotc.rotate(Math.PI/4.0);
rotc.translate(-250,-250)
rotc.rect(200,210,200,30);
rotc.drawImage(faceimg,100,100);
rotc.strokeText("After Rotation pi/4 or 45 degrees",235,225);
rotc.stroke();
rotc.restore();

// place and rotate 20 copies of the captain at 4.5 degrees increments

radians=Math.PI/(2.0*20)
radian_increment=Math.PI/(2.0*20);
for (i=1;i<21;i++)
{
  rotc.save();
  rotc.translate(110,400);
  rotc.rotate(radians);
  rotc.translate(-110,-400)
  rotc.drawImage(faceimg,10,300);
  rotc.restore();
  radians=radians+radian_increment;
}