title: PHP or HTML form messing up string formating
body: <p>I'm encountering some odd behaviour when juggling a String from (generation in JavaScript) through (form submission in HTML form) to (echoing in PHP). Generation: </p>
  
  <pre><code>function constructCanvasString(){                   
  
      //&lt;table&gt; added later, when title and artist name is available.
      var canvasString = '';
  
      for (var y = 0; y &lt; height; y++) {
          canvasString += "&lt;tr&gt;";
          for (var x = 0; x &lt; width; x++) {
              canvasString += "&lt;td x='" + x + "' y='" + y + "' style='background-color: " + $("#" + x + "-" + y).css('background-color') + "'&gt;&lt;/td&gt;";
          }
          canvasString += "&lt;/tr&gt;";
      }    
      canvasString += "&lt;/table&gt;";
      console.log(canvasString);
      document.getElementById('canvasstring').value = canvasString;
  }
  </code></pre>
  
  <p>The console.log(canvasString); returns code where the td's look like this:</p>
  
  <pre><code>&lt;td x='23' y='4' style='background-color: rgb(0, 0, 255)'&gt;&lt;/td&gt;
  &lt;td x='24' y='4' style='background-color: transparent'&gt;&lt;/td&gt;
  </code></pre>
  
  <p>The string is given to a form field. The form looks like this: </p>
  
  <pre><code>&lt;form id="publishform" method="POST" action="publish-canvas.php"&gt;
          &lt;input type="text" name="title" value="Title"&gt; by 
          &lt;input type="text" name="artist" value="Artist"&gt;
          &lt;input type='hidden' id="canvasstring" name='canvasstring' value=''&gt;
          &lt;input type="submit" id="publishbutton" value="Publish"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The form info is then passed to publish-canvas.php which holds this code:</p>
  
  <pre><code>&lt;?php
  
  $title = $_POST['title'];
  $artist = $_POST['artist'];
  $canvasstring = $_POST['canvasstring'];
  $canvasstring = "&lt;table id=\"" . $title . "_by_" . $artist . "\" title=\"" . $title . "_by_" . $artist . "\"&gt;" . $canvasstring;
  echo $canvasstring;
  
  ?&gt;
  </code></pre>
  
  <p>On that page, the td's look like this, messing up my careful formating:</p>
  
  <pre><code> &lt;td transparent\'="" style="\'background-color:" y="\'0\'" x="\'2\'"&gt;&lt;/td&gt;
   &lt;td 0)\'="" 255,="" rgb(255,="" style="\'background-color:" y="\'0\'" x="\'3\'"&gt;&lt;/td&gt; 
  </code></pre>
  
  <p>Where is this happening, and how do I stop it? </p>