HTML5 Canvas Cookbook

Dragging-and-dropping images

This recipe essentially combines the concepts from the previous two recipes to demonstrate how we can drag-and-drop an image.

How to do it...

Follow these steps to drag-and-drop an image:

1. Link to the Events class:

   <script src="events.js">
   </script>

2. Define the writeMessage() function which writes out a message:

   <script>
       function writeMessage(context, message){
           context.font = "18pt Calibri";
           context.fillStyle = "black";
           context.fillText(message, 10, 25);
       }

3. Define the drawImage() function which begins by instantiating a new Events object and setting the initial position of the rectangular region that overlays the image:

    function drawImage(challengerImg){ var events = new Events("myCanvas"); var canvas = events.getCanvas(); var ...