This recipe essentially combines the concepts from the previous two recipes to demonstrate how we can drag-and-drop an image.
Follow these steps to drag-and-drop an image:
Link to the
Events
class:<script src="events.js"> </script>
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); }
Define the
drawImage()
function which begins by instantiating a newEvents
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 context = events.getContext(); var rectX = canvas.width / 2 - challengerImg.width / 2; var rectY = canvas.height / 2 - challengerImg.height / 2...