title: Losing value while instancing new object
body: <p>I'm trying to draw lines in HTML Canvas using Javascript.</p>
  
  <p>So overall how it's supposed to work:
  Event Listener to 'mousedown' starts the process, creates the object in 'createLine' function and update it's dimensions and orientation in the event 'mousemove'. When I let go (meaning the event mouseup) the object is done and pushed into an array (again on the function 'createLine').</p>
  
  <p>What's happening:
  I've watched the values all over (mouse positions) and it seems that they disappear whenever I create the object. And it's never shown on screen. But they are stored on the 'figures' array but in both beggining and ending positions on the same place.</p>
  
  <p>See code Below:</p>
  
  <pre><code>function Ponto (_mouse){
      this.x = _mouse.x
      this.y = _mouse.y
      this.id = 'Ponto'
      this.color = 'black'
      this.clicks = 1
  }
  
  Ponto.prototype.draw = function(canvas, context){
      context.beginPath()
      context.rect(this.x, this.y, 1, 1)
      context.stroke()
  }
  
  //Line class
  function Linha(_pointIn, _pointFin){
      this.pointIn  = _pointIn
      this.pointFin = _pointFin
      this.name = 'Linha'
      this.color = 'black'
      this.isDrawing = true
  }
  
  Linha.prototype.draw = function(canvas, context){
      context.beginPath()
      context.strokeStyle = this.color
      context.lineWidth = '1'
      context.moveTo(this.pointIn.x, this.pointIn.y)
      context.lineTo(this.pointFin.x, this.pointFin.y)
      context.stroke()
  }
  
  function getClicks(){
      return mouse    
  }
  
  var canvas    = document.getElementById('canvasCG')
  var ctx       = canvas.getContext('2d')
  ctx.lineWidth = 1
  
  var figures = new Array()
  var click1  = undefined
  var click2  = undefined
  
  var tempFigure = undefined
  var isDrawing  = 0
  
  var mouse = {x:0, y:0}
  
  function clearCanvas(){
      ctx.fillStyle = 'rgba(255, 255, 255, 0)'
      ctx.fillRect = (0, 0, canvas.width, canvas.height)
  }
  
  function resetVariables(){
      click1 = undefined
      click2 = undefined
      tempFig = undefined
      isDrawing = 0
  }
  
  //Mouse Move event
  canvas.addEventListener('mousemove', function(e){
      mouse.x = e.pageX - this.offsetLeft
      mouse.y = e.pageY - this.offsetTop
  
      clearCanvas()
      for(i=0; i&lt;figures.length; i++){
          figures[i].draw(canvas, ctx)
      }
  
      if(isDrawing == 1 &amp;&amp; tempFigure != undefined){
          if(tempFigure.name == 'Linha')
              tempFigure.pointFin = mouse
          tempFigure.draw(canvas, ctx)
      }
  }, false)
  
  
  canvas.addEventListener('mousedown', function(e){
      isDrawing = 1
      click1 = getClicks()
  
      if(isDrawing == 1){
      click1 = getClicks()
      click2 = getClicks()
      createLine(click1, click2)
      }
  }, false)
  
  canvas.addEventListener('mouseup', function(e){
      isDrawing = 0
      click2 = getClicks()
      if(tempFigure.name == 'Linha')
      createLine(click1, click2)
  }, false)
  
  
  function createLine(click1, click2){
      if(isDrawing==1){
          tempFigure = new Linha(click1, click2)
      }else{
          figures.push(tempFigure)
          resetVariables()
      }
  }
  </code></pre>