Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>testing testing</title>
    <script>
      var canvas, ctx, x, y, dir, width, height, radius, height_rect, degree, dirX, dirY;

     function anim() {
     	var multiplier = 3;
     	var dX = multiplier * dirX;
     	var dY = multiplier * dirY;
     	var cW = canvas.width;
     	var cH = canvas.height;
     	width = 60;
        height = 60;
        radius = height / 2;
        height_rect = height - radius;
     	ctx.clearRect(0, 0, cW, cH);
        ctx.fillStyle = "magenta";
        ctx.strokeStyle = "magenta";
        ctx.lineWidth = 1;
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(degree * Math.PI / 180);
        ctx.translate(-x, -y);
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + height_rect, y);
        ctx.arc(x + height_rect, y + radius, radius, - Math.PI / 2, Math.PI / 2);
        ctx.lineTo(x, y + width);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        ctx.restore();


		if(dirY < 0 && y + dY < cH - 10 || x < cW + 10) {
			dirY = 0;
			degree = 0;
			dirX = 1;
			x += dX;

		}
		if(dirX > 0 && x + dX > cW - 10) {
			dirX = 0;
			degree = 90;
			dirY = 1;
			y += dY;

		}
		if(y + dY > cH - 10) {
			dirY = 0;
			degree = 180;
			dirX = -1;
			//x -= dX;

		}
		/*if(x + dX < cW + 20 && dirX < 0) {
			dirX = 0;
			degree = -90;
			dirY = -1;

		}*/

     	  requestAnimationFrame(anim);
     }

      function init() {
        canvas = document.getElementById("cvsAnim");
        ctx = canvas.getContext("2d");
        x = 10; y = 10; dirX = 0; dirY = 0;
        degree = Math.PI / 2;
        anim();
      }
      window.onload = init;
    </script>


  </head>

  <body>
    <canvas id="cvsAnim" width="800" height="800" style="background-color:"black">
    	<div id="animBox">

    	</div>
    </canvas>
  </body>
</html>