In which I play with oCanvas and a learn a little bit of maths
oCanvas makes drawing and manipulating shapes in canvas easier by treating everything as objects.
In the demo below we have a spaceship. The spaceship is an oCanvas object. We draw it, add it to our canvas and then every 33.333 milliseconds we change the X and Y positions of the ship according to its speed and angle.
Whenever the left or right key is held down we recalculate the angle of the ship in radians. If the left key is pressed then direction = -1, if the right key is pressed then direction = 1. The turnSpeed variable is set to 0.3.
ship.angle = (ship.angle + direction * turnSpeed) % (2 * Math.PI);
Inside our loop we grab the current angle and calculate the x and y position of the ship before redrawing the canvas.
ship.x = ship.x + ship.speed * Math.sin(ship.angle);
ship.y = ship.y - ship.speed * Math.cos(ship.angle);
canvas.redraw();