title: Uncaught TypeError: Cannot read property 'width' of null
body: <p>I actually don't know what's happened because it was working last night. Anyway, I'm trying to make a drawing application with html5 and javascript. This is the first time I've properly looked at JS and created something with it so I've got my code from various tutorials and help from other friends a.k.a I'm a n00b. I used the following:</p>
  
  <ol>
  <li>github.com/jaseemkp/paint-app-with-save-facility</li>
  <li>codetheory.in/different-tools-for-our-sketching-application/</li>
  <li>HTML5 Canvas Cookbook - Chapter 6: Interacting with the Canvas:
  Attaching Event Listeners to Shapes and Regions - Creating a drawing
  application. (I got the save feature from this)</li>
  </ol>
  
  <p>When I test my work in chrome I get the error </p>
  
  <blockquote>
    <p>"Uncaught TypeError: Cannot read property 'width' of null"</p>
  </blockquote>
  
  <p>which refers to line 4 of my script file which is</p>
  
  <pre><code>var b_width = canvas.width, b_height = canvas.height;
  </code></pre>
  
  <p>I was trying to fiddle around with it to add a text feature but just couldn't get it to work so I just undone everything and now it's producing this error.</p>
  
  <p>Full script:</p>
  
  <pre><code>var canvas = document.getElementById("realCanvas");
  var tmp_board = document.getElementById("tempCanvas");
  var b_width = canvas.width, b_height = canvas.height;
  var ctx = canvas.getContext("2d");
  var tmp_ctx = tmp_board.getContext("2d");
  var x, y; 
  var saved = false, hold = false, fill = false, stroke = true, tool = 'rectangle';
  
  var data = {"rectangle": [], "circle": [], "line": []};
  
  
  function curr_tool(selected){tool = selected;}
  
  function attributes(){
      if (document.getElementById("fill").checked)
          fill = true;
      else
          fill = false;
      if (document.getElementById("outline").checked)
          stroke = true;
      else
          stroke = false;
  }
  
  
  function clears(){
      ctx.clearRect(0, 0, b_width, b_height);
      tmp_ctx.clearRect(0, 0, b_width, b_height);
      data = {"rectangle": [], "circle": [], "line": []};
  }
  
  //colour function
  function color(scolor){  
      tmp_ctx.strokeStyle = scolor;
      if (document.getElementById("fill").checked)
          tmp_ctx.fillStyle =  scolor; 
  }
  
  
  
  //line
  
  tmp_board.onmousedown = function(e) {
      attributes();
      hold = true;
      x = e.pageX - this.offsetLeft;
      y = e.pageY -this.offsetTop;
      begin_x = x;
      begin_y = y;
      tmp_ctx.beginPath();
      tmp_ctx.moveTo(begin_x, begin_y);    
  }
  
  
  tmp_board.onmousemove = function(e) {
      if (x == null || y == null) {
          return;
      }
      if(hold){
          x = e.pageX - this.offsetLeft;
          y = e.pageY - this.offsetTop;
          Draw();
      }
  }
  
  tmp_board.onmouseup = function(e) {
      ctx.drawImage(tmp_board,0, 0);
      tmp_ctx.clearRect(0, 0, tmp_board.width, tmp_board.height);
      end_x = x;
      end_y = y;
      x = null;
      y = null;
      Draw();
      hold = false;
  }
  
  
  
  //draw function
  function Draw(){
  
  //rectangle
  if (tool == 'rectangle'){
  
      if(!x &amp;&amp; !y){
      data.rectangle.push({"x": begin_x, "y": begin_y, "width": end_x-begin_x, "height": end_y-begin_y, "stroke": stroke, "strk_clr": tmp_ctx.strokeStyle, "fill": fill, "fill_clr": tmp_ctx.fillStyle });
          return;
      }  
      tmp_ctx.clearRect(0, 0, b_width, b_height);
      tmp_ctx.beginPath();
  
      if(stroke)
          tmp_ctx.strokeRect(begin_x, begin_y, x-begin_x, y-begin_y);
          tmp_ctx.lineWidth = $('#selWidth').val();
      if(fill) 
          tmp_ctx.fillRect(begin_x, begin_y, x-begin_x, y-begin_y);
          tmp_ctx.closePath();
  
      }
  
  //line
  
  if (tool == 'line'){
      if(!x &amp;&amp; !y){
          data.line.push({"x": begin_x, "y": begin_y, "width": end_x-begin_x, "height": end_y-begin_y, "stroke": stroke, "strk_clr": tmp_ctx.strokeStyle,});
          return;
      }  
      tmp_ctx.beginPath();
      if(stroke)
      tmp_ctx.strokeRect(begin_x, begin_y, x-begin_x, y-begin_y);
      tmp_ctx.clearRect(0, 0, tmp_board.width, tmp_board.height);
      tmp_ctx.beginPath();
      tmp_ctx.moveTo(begin_x, begin_y);
      tmp_ctx.lineTo(x, y);
      tmp_ctx.lineWidth = $('#selWidth').val();
      tmp_ctx.stroke();
      tmp_ctx.closePath();
  
      }
  
  //circle
  
  else if (tool == 'circle'){   
      if(!x &amp;&amp; !y){
          data.circle.push({"x": begin_x, "y": begin_y, "radius": end_x-begin_x, "stroke": stroke, "strk_clr": tmp_ctx.strokeStyle, "fill": fill, "fill_clr": tmp_ctx.fillStyle });   
          return;
      }   
      tmp_ctx.clearRect(0, 0, b_width, b_height);
      tmp_ctx.beginPath();
      tmp_ctx.arc(begin_x, begin_y, Math.abs(x-begin_x), 0 , 2 * Math.PI, false);
  
      if(stroke) 
      tmp_ctx.stroke();
      tmp_ctx.lineWidth = $('#selWidth').val();
      if(fill) 
      tmp_ctx.fill();
      tmp_ctx.closePath();
  
      }
  
  }
  
  //save function
  //set up image of canvas
  function getCanvasImg(canvas){
      var img = new Image();
      img.src = canvas.toDataURL();
      return img;
  }
  //get image of canvas
  window.onload = function (){
      var events = new Events("tempCanvas");
      var canvas = events.getCanvas();
      var context = events.getContext();
  }
  //open image of canvas in new window in click of button
  document.getElementById("saveButton").addEventListener("click", function(evt){
      //open new window with saved image, right click and save
      window.open(canvas.toDataURL());
  }, false);
  </code></pre>
  
  <p>Full HTML</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;LogoMakr&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
      &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt; &lt;/script&gt;
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="tools"&gt;
          &lt;button type="button" id="saveButton" value="Save"&gt;Save&lt;/button&gt;
          &lt;button type="button" onclick="clears()"&gt;CLEAR&lt;/button&gt;
          &lt;button type="button" onclick="curr_tool('rectangle')"&gt;Rectangle&lt;/button&gt;
          &lt;button type="button" onclick="curr_tool('circle')"&gt;Circle&lt;/button&gt;
          &lt;button type="button" onclick="curr_tool('line')"&gt;Line&lt;/button&gt;
  
      &lt;/div&gt;
  
      &lt;table id="table1" &gt;
          &lt;tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;button onclick="color('black')" style="background-color: black; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button onclick="color('white')" style="background-color: white; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button onclick="color('green')" style="background-color: green; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button onclick="color('blue')" style="background-color: blue; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button onclick="color('yellow')" style="background-color: yellow; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button onclick="color('red')" style="background-color: red; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button onclick="color('#ff6600')" style="background-color: #ff6600; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button onclick="color('#663300')" style="background-color: #663300; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button onclick="color('grey')" style="background-color: grey; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button onclick="color('#FF6699')" style="background-color: #FF6699; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button onclick="color('#8b00ff')" style="background-color: #8b00ff; height: 20px; width: 20px;"&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="fill"/&gt;Fill&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="outline" checked="checked"/&gt;Outline&lt;/td&gt;
  
              &lt;td&gt;Line Width:&lt;/td&gt;
              &lt;td&gt;&lt;select id="selWidth"&gt;
                      &lt;option value="1"&gt;1&lt;/option&gt;
                      &lt;option value="3"&gt;3&lt;/option&gt;
                      &lt;option value="5" selected="selected"&gt;5 &lt;/option&gt;
                      &lt;option value="7"&gt;7&lt;/option&gt;
                      &lt;option value="9" &gt;9&lt;/option&gt;
                      &lt;option value="11"&gt;11&lt;/option&gt;
                      &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  
      &lt;div&gt;
          &lt;canvas id="realCanvas" width="680" height="460" style=" background-color: #ffffff; z-index: 0"  &gt;&lt;/canvas&gt;
          &lt;canvas id="tempCanvas" width="680" height="460"  style="z-index: 1"&gt;&lt;/canvas&gt;
      &lt;/div&gt;  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#realCanvas, #tempCanvas {
      position: absolute;
      left:280px;
      top:50px;
      border: 5px solid;
      cursor: crosshair;
  }
  
  
  
  #table1{
      position: absolute;
      left:400px;
      top:5px; 
  }
  </code></pre>
  
  <p>When I've uploaded it to a <a href="http://logomakr.bugs3.com/" rel="noreferrer">free server</a>, I've got different errors though. Oh I'm so confused, I hope there's someone out there that can make sense of it all :/</p>
  
  <p>Thanks in advance!</p>