Edit in JSFiddle

var canvas = null;
var ctx = null;
var FPS = 30; // How many times tick should be called per second.
var entities = new Array(); // Stores everything in the game.
var keysDown = {}; // stores user input until it is needed by a tick.
window.onload = setup;
var shipSpeed = 5;
var innerEdge = []

function setup() {
    // Connect to canvas.
    canvas = document.getElementById("viewport");
    ctx = canvas.getContext("2d");
    
    // Add backdrop and player entities.
    entities.push({name:'Backdrop', iSrc:'http://i.imgur.com/lLjVV.png'});
    entities.push({name:'Player', iSrc:'http://i.imgur.com/NkbZz.png', x:300, y:250, facing:270});
    
    // Load images.
    for (i in entities){
        entities[i].image = new Image();
        entities[i].image.src = entities[i].iSrc;
    }
    
    // Catch Input
    addEventListener("keydown", function (e){
        keysDown[e.keyCode] = true;
    }, false);
    addEventListener("keyup", function (e){
        delete keysDown[e.keyCode];
    }, false);
    
    
    // Launch game loop
    setInterval(tick, 1000 / FPS);
}

function tick() {
    // Where stuff happens.
    update();
    draw();
    output = document.getElementById("output");
    output.innerHTML = entities[1].facing;
}

function update() {
    // Change entities based on user actions.
    movement();
    restrain();
}

function restrain() {
    for (i in entities) {
        if (entities[i].name != "Backdrop") {
            if (entities[i].x < 20) {entities[i].x = 20;}
            if (entities[i].x > 580) {entities[i].x = 580;}
            if (entities[i].y < 20) {entities[i].y = 20;}
            if (entities[i].y > 480) {entities[i].y = 480;}
            
        }
    }
}

function movement() {
    // q:81  w:87  e:69  a:65  s:83  d:68
    if (81 in keysDown) {
        // Q pressed - TURN LEFT
        entities[i].facing = (entities[i].facing - shipSpeed) % 360;
        if (entities[i].facing < 0) {
            entities[i].facing += 360;
        }
    }
    if (87 in keysDown) {
        // W pressed - MOVE UP
        entities[i].y -= shipSpeed;
    }
    if (69 in keysDown) {
        // E pressed - TURN RIGHT
        entities[i].facing = (entities[i].facing + shipSpeed) % 360;
    }
    if (65 in keysDown) {
        // A pressed - MOVE LEFT
        entities[i].x -= shipSpeed;
    }
    if (83 in keysDown) {
        // S pressed - MOVE DOWN
        entities[i].y += shipSpeed;
    }
    if (68 in keysDown) {
        // D pressed - MOVE RIGHT
        entities[i].x += shipSpeed;
    }
}

function radi(degrees) {
    // Converts normall measurements into weird ones
    return (Math.PI/180)*degrees;
}

function draw() {
    // Draw everything
    for (i in entities){
        ctx.save();
        switch (entities[i].name) {
            case 'Backdrop':
                ctx.drawImage(entities[i].image, 0, 0);
                break;
            case 'Player':
                ctx.translate(entities[i].x, entities[i].y);
                ctx.rotate(radi(entities[i].facing));
                ctx.drawImage(entities[i].image, -15, -13);
                break;
        }
        ctx.restore();
    }
}

<div><h1>A game in space!!!!!</h1></div>

<canvas id="viewport" width="600" height="500">
    <p>Your browser is old try <a href="www.google.com/chrome" >chrome</a></p>
</canvas>

<div>Code by James Makinson. Taught by SquashMonster on Reddit</div>
<div>Backdrop and spaceship from <a href='http://opengameart.org/'>http://opengameart.org/</a></div>
<div id="output"></div>

body {
    color: #999;
    text-align: center;
    background-color: #333;
}

div {
    margin: 10px;
    font: normal small helvetica, sans-serif;
}

h1 {
    font: normal large verdana, arial, helvetica, sans-serif;
}

a {
    color: #777;
}