bird.html

<style type="text/css">
canvas { border: 1px solid #000; position:absolute; top:0;left:0; 
visibility: hidden; }
</style>
<canvas id="MainCanvas" width="480" height="640"></canvas>
<canvas id="SecondCanvas" width="480" height="640"></canvas>
<script type="text/javascript" src="bird.js"></script>

bird.js

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var rectWidth = 150;
      var rectHeight = 75;
        
        context.fillStyle = 'blue';
      context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth,rectHeight);

      // translate context to center of canvas
      context.translate(canvas.width / 2, canvas.height / 2);

      context.fillStyle = 'blue';
      context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);