<!DOCTYPE html>
<html>
<head>
 <meta charset='utf-8'>
 <title> Ship </title>
 <style>
 #c { border: 1px solid black; }
 </style>
</head>
<body>
<canvas id='c' width=1024 height=768></canvas>
<script>
var ship = {
  x : 10,
  y : 10,
  dx : .5,
  dy : .2,
  angle : 0,
  da : 1,

  draw : function() {
    var ctx = document.getElementById("c").getContext("2d");
    ctx.clearRect(0,0,1024,768);
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    ctx.save();
    ctx.translate(this.x,this.y);
    ctx.scale(.5,.5);
    ctx.rotate(this.angle*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(100,0);
    ctx.lineTo(-100,50);
    ctx.lineTo(-100,-50);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
  },
  update : function() {
    this.x = this.x + this.dx;
    this.y = this.y + this.dy;
    this.angle = this.angle + this.da;
  }    
};

function update() {
  ship.draw();
  ship.update();
  setTimeout(update, 33);
}

setTimeout(update, 33);

</script>
</body>
</html>