title: Canvas element can't be drawn on after jquery display transition
body: <p>I'm creating a drawing app using canvas. It works fine if the div containing the canvas element is shown. However, I want to initially have the containing div hidden and then "launch" the drawing app using a jquery transition to fade in the drawing interface. So the containing div initially has its css 'display' property set to 'none' and then I show it. However, when I do this, the canvas element will no longer receive any drawing input. I've tried setting the display:none dynamically after the canvas element is rendered by my script to make sure there's no interference there, but no dice. Any suggestions?</p>
  
  <p>Here is the html structure for the drawing interface:</p>
  
  <pre><code>&lt;!--DRAWING INTERFACE--&gt;
      &lt;style&gt;
         #draw-container {
           display:none;
           width:1920px;
           height:1080px;
           position:absolute;
           top:0px;
           left:0px;
         }
       &lt;/style&gt;
  &lt;div id="draw-container"&gt;
      &lt;h1&gt;Send a Drawing&lt;/h1&gt;
      &lt;div id="draw" class="panel"&gt;
      &lt;/div&gt;
      &lt;div id="draw-buttons"&gt;
          &lt;a id="sendButton" href="#" class="round"&gt;&gt;&lt;/a&gt;
          &lt;a id="clearButton" href="#" class="round"&gt;+&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then this function gets called, which creates the canvas element as a child of the "draw" div:</p>
  
  <pre><code>//creating canvasses
  function drawCanvas(id,xOffset){
      //draw
      var canvas = document.createElement("canvas");
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      canvas.id = id;
      $('#draw').append(canvas);
  }
  </code></pre>
  
  <p>And when a user clicks on a button to reveal the drawing module:</p>
  
  <pre><code>document.getElementById('drawLaunch').addEventListener("click", function(){
      $('#draw-container').show();
  });
  </code></pre>
  
  <p>And finally, here's the drawing function:</p>
  
  <pre><code>function _drawCircle(mouseX, mouseY) {
  //get position
  var x = mouseX - offsetLeft,
      y = mouseY - offsetTop;
  //move mouse to the previous point
  if (lastX == null) {
      lastX = x;
      lastY = y;
  }
  context.moveTo(lastX,lastY);
  //draw line
  context.lineTo(x, y);
  context.stroke();
  //set new last point
  lastX = x;
  lastY = y;
  </code></pre>
  
  <p>}</p>
  
  <p>Now, if I keep everything the same but just remove the 'display:none;" from the stylesheet so that the canvas is shown when the page is loaded, everything works fine. But if it's hidden and then shown, you can't draw on it.</p>