var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var keyUp = false, keyDown = false, keyRight = false, keyLeft = false;
var ships = [];
var playerPos = new Vector2();
var canvasMeasurements = new Vector2(canvas.width, canvas.height)



function update() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    draw();
    window.requestAnimationFrame(update);

}

GameStart();
update();

function GameStart(){
    playerPos.x = canvasMeasurements.x / 2;
    playerPos.y = canvasMeasurements.y - 40;
}

function draw(){
    CannonBase();
    CannonLoop();
}

function CannonBase(){
    context.fillStyle = "black";
    context.arc(playerPos.x, playerPos.y, 50, Math.PI * 1, Math.PI * 2, false);
    context.fill();
}

function CannonLoop(){
    var angle = 200;

    context.translate(playerPos.x, playerPos.y);
    context.rotate(this.angle);
    context.translate(-playerPos.x, -playerPos.y);
    context.beginPath();
    context.moveTo(playerPos.x, playerPos.y);
    context.lineTo(playerPos.x + 15, playerPos.y - 100);
    context.lineTo(playerPos.x - 15, playerPos.y - 100);
    context.lineTo(playerPos.x, playerPos.y)
    context.lineWidth = 3;
    context.stroke();
    context.endPath();
}

function Vector2(x, y){
    this.x = x;
    this.y = y;
}

update();