title: problems with canvas
body: <p>Here's my html document:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Automapper Editor&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;nobr&gt;
  
  &lt;script&gt;
  var img = new Image()
  img.src = "grass_main_0.7.png"
  
  for(var y=0; y &lt; 16; y++) {
      for(var x=0; x &lt; 16; x++) {
              var tilecanvas = document.createElement("canvas")
              var tilectx = tilecanvas.getContext("2d")
              tilecanvas.width = 64
              tilecanvas.height = 64
              tilecanvas.draggable = true
              tilectx.drawImage(img, x*64, y*64, 64, 64, 0, 0, 64, 64)
              document.body.appendChild(tilecanvas)
      }
      document.body.appendChild(document.createElement("br"))
  }
  &lt;/script&gt;
  
  &lt;/nobr&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to split an image with the size of 1024 pixel in 16 images with the size of 64 pixel. Then i want to draw them on canvas and write them to the document. This are my problems:</p>
  
  <ul>
  <li>The line <code>tilecanvas.draggable = true</code> doesn't work, this should do the same as <code>&lt;canvas draggable="true"&gt;</code>.</li>
  <li>The <code>&lt;nobr&gt;</code> tag doesn't prevent the canvas from wrapping, but i want them to stay 16x16 on the screen.</li>
  <li>The first time you load the page you can't see the image, you can simulate this by pressing <kbd>STRG+F5</kbd> (a.k.a. <kbd>Ctrl-F5</kbd>) in firefox.</li>
  </ul>