title: card turn canvas draw
body: <p>I want to have twelve (images of) cards facing down next to each other and be able to flip them when clicking on one. To display a random (image of a) card from a selection of twelve without repeating the same image twice.</p>
  
  <p>Also whenever you click on a card I want to have a corresponding part of a numbered canvas to be accessible to draw on. This should continued till all cards are turned and all the areas are drawn. </p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
     &lt;head&gt;
        &lt;title&gt;game&lt;/title&gt;
        &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"&gt;&lt;/script&gt;
        &lt;!--[if IE]&gt;&lt;script type="text/javascript" src="excanvas.js"&gt;&lt;/script&gt;   &lt;![endif]--&gt;
        &lt;script type="text/javascript" src="html5-canvas-drawing-app.js"&gt;   &lt;/script&gt;
        &lt;script language="javascript"&gt;
           var imagesArray = [ 'images/img-1.jpg', 'images/img-2.jpg',
           'images/img-3.jpg', 'images/img-4.jpg', 'images/img-5.jpg',
           'images/img-6.jpg', 'images/img-7.jpg', 'images/img-8.jpg',
           'images/img-9.jpg', 'images/img-10.jpg', 'images/img-11.jpg',
           'images/img-12.jpg' ];
  
           var usedImages = {}; var usedImagesCount = 0;
  
           function displayImage(){
  
               var num = Math.floor(Math.random() * (imagesArray.length));
               if (!usedImages[num]){
                   document.canvas.src = imagesArray[num];
                   usedImages[num] = true;
                   usedImagesCount++;
                   if (usedImagesCount === imagesArray.length){
                       usedImagesCount = 0;
                       usedImages = {};
                   }
               } else {
                   displayImage();
               } }
  
  
        &lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;table border=0 cellpadding="0" cellspacing="0"&gt;
           &lt;tr align="center"&gt;
              &lt;td&gt;&lt;img src="images/blank.jpg" name="canvas" onClick="displayImage()"/&gt;&lt;/td&gt;
           &lt;/tr&gt;
        &lt;/table&gt;
        &lt;div id="canvasDiv"&gt;&lt;/div&gt;
        &lt;script type="text/javascript"&gt; $(document).ready(function() {
           prepareCanvas(); });
        &lt;/script&gt;
        &lt;a href="#" class="button" id="btn-download" download="my-file-name.png"&gt;Save&lt;/a&gt;
        &lt;script language="javascript"&gt; var button = document.getElementById('btn-download');
           button.addEventListener('click', function (e) {
               var dataURL = canvas.toDataURL('image/png');
               button.href = dataURL; });
  
        &lt;/script&gt; 
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I can't figure out how to have all the cards face down at the start and how to select only past of the canvas for drawing in.  </p>