title: How do I center a rectangle on a canvas
body: <p>I have the vaguest idea why this block of code won't center the rectangle on the canvas. It even ends up being drawn out of bounds.</p>
  
  <p>Please help? </p>
  
  <pre><code> document.addEventListener('DOMContentLoaded', drawIllustrations);                                                                   
  
   function drawIllustrations(e) {                                                                                                     
  
     var fixedBody = document.getElementById('FixedBody'),                                                                             
         contextOne = fixedBody.getContext('2d'),                                                                                      
         centerX = fixedBody.offsetWidth * 0.5;                                                                                        
  
     contextOne.fillStyle = "#BFFF00";                                                                                                 
     contextOne.fillRect(centerX - 100,0,200,fixedBody.offsetHeight);                                                                  
  
   } 
  </code></pre>