title: html5 canvas adding drag and drop functionality to images drawn to the canvas
body: <p>I have a webpage with an HTML5 canvas which I'm using to display a number of images as well as four 'description boxes' on the canvas.</p>
  
  <p>The intention is that users will be able to drag and drop the images to their matching description boxes, however, I'm having a bit of trouble getting the dragging and dropping working.</p>
  
  <p>I've tried several different ways of enabling drag and drop on the images, but none of them seem to work.</p>
  
  <p>The problem I have is that the content of what is to be displayed on the canvas needs to be dynamic, i.e. the administrator will be able to change what images etc are displayed on the canvas by altering the filenames of the images to be used in an XML file, to whichever images he would rather use.</p>
  
  <p>So basically, I want to add code to the JavaScript that is displaying the images on the canvas to enable them to be dragged and dropped around the canvas.</p>
  
  <p>Does anyone have any suggestions of what is the best way to do this?</p>
  
  <p>My HTML page looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src = "kinetic.js" type = "text/javascript"&gt;&lt;/script&gt;
  &lt;title&gt;Home&lt;/title&gt;
  
  &lt;script src = "drawLevelOneElements.js" type = "text/javascript"&gt;&lt;/script&gt;
  &lt;script src = "layers&amp;analytics.js" type = "text/javascript"&gt;&lt;/script&gt;
  &lt;script src = "startGameDrawGameElementsDrawStartButton.js" type = "text/javascript"&gt;&lt;/script&gt;
  &lt;script src = "interaction.js" type = "text/javascript"&gt;&lt;/script&gt;
  &lt;script src = "dragAndDrop.js" type = "text/javascript"&gt;&lt;/script&gt;
  &lt;script src = "dragAndDrop1.js" type = "text/javascript"&gt;&lt;/script&gt;
  &lt;script src = "dragAndDrop2.js" type = "text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.5.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body onLoad="startGame()"&gt;
  
  &lt;section hidden&gt;
  &lt;img id="StartButton" src="StartButton.png" alt="Start Button" width="179" height="180" href="javascript:drawLevelOneElements();"/&gt;
  &lt;/section&gt;
  
      &lt;h1&gt;Home&lt;/h1&gt;
      &lt;p&gt;The purpose of this website is to teach users the basic principles of running a business by playing the game below. &lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
  
      &lt;canvas id="gameCanvas" width="1000" height="500" style="border:1px solid"&gt;
      Your browser does not support the canvas element.
      &lt;/canvas&gt;
  
      &lt;br /&gt;&lt;br /&gt;
      &lt;p&gt;Use this paragraph to enter text that provides the user with instructions for how to play the game. &lt;br /&gt;
          Update the instructions so that they're appropriate to whatever level the user is currently playing.&lt;/p&gt;
  
      &lt;script src = "variables&amp;preloadingImages.js" type = "text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I've tried adding the drag and drop functionality in the three different ways- hence the three drag and drop JS files that I've included, but none of these seem to work.</p>
  
  <p>The JavaScript that I'm using to draw the images to the canvas is simply a number of arrays, with each element holding a single image. There is an array for each category of image that I'm drawing to the canvas, and the number of images in each category is variable.</p>
  
  <p>I've then used the JS concat method to concatenate the arrays, putting all of the images in a single array called <code>allImagesArray</code>.</p>
  
  <p>I have the following function, which draws each image from allImagesArray in a random location on the canvas:</p>
  
  <pre><code>function drawLevelOneElements(){
              /*First, clear the canvas */ 
              context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
              /*This line clears all of the elements that were previously drawn on the canvas. */
              /*Then redraw the game elements */
              drawGameElements(); 
  
              /*Create the four description areas, and place them near the bottom of the canvas */
              /*Create boxes with rounded corners for the description areas */
              CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
                  if(typeof stroke == "undefined" ){
                      stroke = true;
                  }
                  if(typeof radius === "undefined"){
                      radius = 5;
                  }
                  this.beginPath();
                  this.moveTo(x + radius, y);
                  this.lineTo(x + width - radius, y);
                  this.quadraticCurveTo(x + width, y, x + width, y + radius);
                  this.lineTo(x + width, y + height - radius);
                  this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
                  this.lineTo(x + radius, y + height);
                  this.quadraticCurveTo(x, y + height, x, y + height - radius);
                  this.lineTo(x, y + radius);
                  this.quadraticCurveTo(x, y, x + radius, y);
                  this.closePath();
                  if(stroke){
                      context.stroke();
                  }
              }
  
              context.drawDescriptionArea(70, 400, 120, 70);
              context.font = '25pt Calibri';
              context.strokeText('Asset', 90, 440);
  
              context.drawDescriptionArea(300, 400, 120, 70);
              context.strokeText('Liability', 310, 440);
  
              context.drawDescriptionArea(540, 400, 120, 70);
              context.strokeText('Income', 550, 440);
  
              context.drawDescriptionArea(750, 400, 180, 70);
              context.strokeText('Expenditure', 760, 440);
  
              /*Now draw the images to the canvas */
              /*First, create variables for the x &amp; y coordinates of the image that will be drawn.
                  the x &amp; y coordinates should hold random numbers, so that the images will be 
                  drawn in random locations on the canvas.*/
                  var imageX = Math.floor(Math.random()*100);
                  var imageY = Math.floor(Math.random()*100);
  
                  /*Create a 'table' of positions that the images will be drawn to */
                  var imagePositionsX = [20, 80, 140, 200, 260, 320, 380, 440, 500, 560];
                  var imagePositionsY = [20, 60, 100, 140, 180, 220, 260, 300, 340, 380];
  
              /*Draw all images from assetsImageArray */
              /*Use a while loop to loop through the array, get each item and draw it. */
              var arrayIteration = 0;
              console.log('All Images Array length: ' + allImagesArray.length); /*Display the length of the array in the console, to check it's holding the correct number of images. */
              while(arrayIteration &lt; allImagesArray.length){
                  var randomPositionX = Math.floor(Math.random()*10);
                  var randomPositionY = Math.floor(Math.random()*10);
                  context.drawImage(allImagesArray[arrayIteration], imageX, imageY, 50, 50);
                  console.log(arrayIteration); /*Display the current array position that's being drawn */
                  arrayIteration = arrayIteration+1;
                  /*Now try changing the values of imageX &amp; imageY so that the next image is drawn to a 
                      different location*/
                  imageX = imagePositionsX[randomPositionX];  /* imageX+(Math.floor(Math.random()*100)); */
                  imageY = imagePositionsY[randomPositionY];  /* imageY+(Math.floor(Math.random()*100));  */
  
              }
  
          }
  </code></pre>
  
  <p>This function also draws four 'description areas' on the canvas, labelled 'Asset', 'Liability', 'Income' and 'Expenditure'.</p>
  
  <p>What the user is required to do, is drag each image to its corresponding 'description area'. When an image is dragged to the correct description area, it should then disappear from the canvas.</p>
  
  <p>But although I have the images and description areas drawn to the canvas, I can't seem to work out how to add drag &amp; drop functionality to the images.</p>
  
  <p>I've had a look at several examples online, but can't seem to get any of them working- I'm wondering if it's because I'm drawing the images from an array using a while loop? I've also looked at other questions asked on this site, but can't seem to find the answer in any of those.</p>
  
  <p>I've looked at the tutorials at <a href="http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/" rel="nofollow">http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/</a> and <a href="http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-multiple-images-with-kineticjs/" rel="nofollow">http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-multiple-images-with-kineticjs/</a> but can't seem to make these examples work with my code. Does anyone have any ideas of how I can add drag and drop functionality to each of the images drawn to the canvas using my <code>drawLevelOneElements()</code> function?</p>