title: HTML5 Canvas changes colors of all lines
body: <p>I made a simple drawing app with HTML5 canvas. You click in two different positions to draw a line from one point to another. I also have two text input boxes where you can change the line thickness and color. Problem is, when I change the color of a line it changes <em>all</em> the previously drawn lines. This also happens when changing line thickness, but only if I draw a thicker line than before (if I draw a thinner line the other lines do not change).</p>
  
  <p>I'm new to HTML5 and all so any help would be greatly appreciated.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Canvas&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas width="300" height="300" id="myCanvas"&gt;&lt;/canvas&gt;
  &lt;br /&gt;
  &lt;input type="button" value="Enter Coordinates" onclick="enterCoordinates()"&gt;&lt;/input&gt;
  Line Width: &lt;input type="text" id="lineWidth"&gt;&lt;/input&gt;
  Line Color: &lt;input type="text" id="lineColor"&gt;&lt;/input&gt;
  &lt;script type="text/javascript"&gt;
      var c = document.getElementById('myCanvas');
      var ctx = c.getContext('2d');
      ctx.fillStyle="#FF0000";
      ctx.fillRect(0,0,300,300);
      function drawLine(start,start2,finish,finish2)
      {
          var c = document.getElementById('myCanvas');
          var ctx = c.getContext('2d');
              // optional variables
              lineWidth = document.getElementById('lineWidth').value;
              if (lineWidth)
              {
                  ctx.lineWidth=lineWidth;
              }
              lineColor = document.getElementById('lineColor').value;
              if (lineColor)
              {
                  ctx.strokeStyle=lineColor;
              }
          ctx.moveTo(start,start2);
          ctx.lineTo(finish,finish2);
          ctx.stroke();
      }
      function enterCoordinates()
      {
          var values = prompt('Enter values for line.\n x1,y1,x2,y2','');
          var start = values.split(",")[0];
          var start2 = values.split(",")[1];
          var finish = values.split(",")[2];
          var finish2 = values.split(",")[3];
          drawLine(start,start2,finish,finish2);
      }
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    document.addEventListener("DOMContentLoaded", init, false);
  
    function init()
    {
      var canvas = document.getElementById("myCanvas");
      canvas.addEventListener("mousedown", getPosition, false);
    }
  
    function getPosition(event)
    {
      var x = new Number();
      var y = new Number();
      var canvas = document.getElementById("myCanvas");
  
      if (event.x != undefined &amp;&amp; event.y != undefined)
      {
        x = event.x;
        y = event.y;
      }
      else // Firefox method to get the position
      {
        x = event.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
        y = event.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
      }
  
      x -= canvas.offsetLeft;
      y -= canvas.offsetTop;
      if (window.startx)
      {
          window.finishx = x;
          window.finishy = y;
          drawLine(window.startx,window.starty,window.finishx,window.finishy);
          // reset
          window.startx = null;
      }
      else
      {
          window.startx = x;
          window.starty = y;
      }
    }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>