Offset issue when plotting

by codepo8

HTML

<section class="stage"><p>without offset</p></section>
  <section class="stage"><p>with offset</p></section>

CSS

*{margin:0;padding:0;font-size:15px;font-family:helvetica,arial,sans-serif}
  footer,section,header{display:block;}
  h1{margin:1em 2em}
  .stage{
    width:200px;
    height:200px;
    margin:2em;
    float:left;
    position:relative;
    background:#ccc;
    overflow:hidden;
  }
  .stage p{
    padding:.5em;
  }

JavaScript

Plot = function ( stage ) {

  this.setDimensions = function( x, y ) {
    this.elm.style.width = x + 'px';
    this.elm.style.height = y + 'px';
    this.width = x;
    this.height = y;
  };
  this.position = function( x, y ) {
    var xoffset = arguments[2] ? 0 : this.width / 2;
    var yoffset = arguments[2] ? 0 : this.height / 2;
    this.elm.style.left = (x - xoffset) + 'px';
    this.elm.style.top = (y - yoffset) + 'px';
    this.x = x;
    this.y = y;
  };
  this.setBackground = function( col ) {
    this.elm.style.background = col;
  };
  this.kill = function() {
    stage.removeChild( this.elm );
  };
  this.rotate = function( str ) {
    this.elm.style.webkitTransform = this.elm.style.MozTransform = 
    this.elm.style.OTransform = this.elm.style.transform = 
    'rotate(' + str + ')'; 
  };
  this.content = function( content ) {
    this.elm.innerHTML = content;
  };
  this.round = function( round ) {
    this.elm.style.borderRadius = round ? '50%/50%' : '';
  };
  this.elm = document.createElement( 'div' );
  this.elm.style.position = 'absolute';
  stage.appendChild( this.elm );
};

var stages = document.getElementsByClassName('stage');
  var p = new Plot( stages[0] );
  p.setBackground( 'green' );
  p.setDimensions( 40, 40 );
  p.position( 100, 100, 1 ); // no correction
  var p2 = new Plot( stages[1] );
  p2.setBackground( 'blue' );
  p2.setDimensions( 40, 40 );
  p2.position( 100, 100 ); // corrected