Canvas drag and drop examples
The process of making a canvas drag of sorts might involve first getting a canvas relative point in a pointer event such as mouse down or a touch start event when it comes to touch events. Then the nest step might be to use that to find out if a display object was clicked or not with some kind of collision detection method such as bounding box. If an object has been clicked then I could set a boolean value for that display object to true that would then used in the logic of a pointer move event. In the body of the pointer move event I would then set the position of the display object to the canvas relative point that is obtained within the event object of the move event. Finally there will be a pointer end event that just sets the boolean back to false leaving the dragged display object at its new location.
1 - Basic canvas drag example
So in this section I will be going over just a basic canvas drag example. This will just be a canvas example where at the center of the canvas there will be a circle, and the circle can just be clicked and dragged around the canvas, thats it nothing special. The example will involve the use of a method that I worked out for another canvas post of mine that has to do with getting a canvas relative point from and event object, and also the distance formula that will be used for collision detection.
1.1 - The get canvas relative method and distance formula
So at the start of my basic.js file I have my get canvas relative method that is used to get a canvas relative position from an event object. This variant of the method seems to work okay for both mouse and touch events just fine for this project at least sense I am not interested in supporting multi touch. I will not be getting into this method in detail here as I have wrote a post on this subject before hand.
In addition to the get canvas relative method I also have the distance formula that will work fine as a collision detection method for this example at least sense it is a circle that I am dealing with. Now that we have that out of the way we can continue to the event handlers.
1.2 - Event handers
So now that I have my get canvas relative method and my distance method I can now put together my event handers. these methods will be called and passed a state object when doing so that will then be accessed by the internal event hander that is returned when using add event listener. More on that later.
1.3 - The draw method
I will just need a single draw method that will be used to paint a sold background to the canvas followed by the circle. This method will be called each time the circle moves as well as one time initially and then end of the code.
1.4 - set up the canvas, state object, and attach events
Now to get a reference to the canvas element, create the state object, and attach the event handlers. I get a reference to the canvas element, and also get a reference to the 2d drawing context as well as set the width and height.
I create the state object with just a single object literal, and then pass it for each call of my pointer handler methods when attaching events to the canvas. I then also call my draw method for the first time, but all additional calls will be made my events rather than an event loop.
Once this is all up and running the result is what I would expect. A single circle at the center of the center of the canvas, and I can then click and drag the circle to any location on the canvas. There is still a bit more to click in drag with canvas though such as snapping things into place.
2 - canvas drag and drop example
Now for a canvas drag and drop example where dropping a display object is a certain area does something. For the sake of this example dropping a circle into an area will just change the color, but depending on the project dropping a display object can do all sorts of things. However for now it will result in just a change of color when it comes to how this example is rendered in canvas.
So this example might still not be anything too interesting, however it will start to become a bit of a major project compared to the previous examples. So this time the code will be broken down into several modules to helper keep things a little more neat and tidy.
2.1 - The Utils.js file
In the basic canvas drag example I just had to methods for getting a canvas relative position and the distance formula at the top of my single main.js file. For this example I pulled those methods into an external utils.js file that will serve as a general utility library for this example.
2.2 - The game.js file to create a game model object
I then have a game.js file that I use to create an object that is a model of this canvas drag and drop example. In other worlds it is an object that holds he current state of display objects and other values of interest, but does not contain code that is used to render the state of that object to the canvas.
This modules has a public API that consists of a main method that I use to create a state object for this module, followed by a single static method that can be used to attach events for a given game state object and a canvas element.
2.3 - The draw.js file to render the game state to the canvas
I now have also pulled code that has to do with rendering a state object to a canvas element into its own file also. Here in my draw.js file I have methods for drawing the background as well as the current state of the display object pools that I create with my game.js file.
2.4 - main.js and index.html
Now I still have a main.js file it is just that this file is keep very small as much of the logic is pulled off into separate files outside of this main.js file.
When this example is working as expected I have a bunch of green circles that I can drag and drop into a box area. When doing so the circle in the box becomes blue, and when I pull the blue circle back out it become green again. Nothing to interesting, but in a more complex project that could eventually become some kind of game where you take display objects and socket them with other display objects to make them active an attack other display objects.
3 - Conclusion
There is much more to this subject then what I have covered thus far when it comes to dragging and dropping with canvas elements. If I get around to it hopefully I will expand this more with additional examples that can sever as additional exercises with drawing display objects and canvas in general.