This is a canvas example that makes use of what I am calling a pointer manager. Maybe there are other names for such a thing but until I am aware of a better name that is what I am going to call it. This pointer manager of sorts will be something that is used just for pointer objects in general that is the result of input from a mouse, touchscreen, or any other means that can be used to create such objects. It is not however a comprehensive input controller that takes input from any additional input such as a keyboard, game pad, and so forth. I have another canvas example that aims to be everything when it comes to input that I wrote a post on, so that post might be worth checking out also. However what I work out here might be part of what might considered a full comprehensive input controller that would handle all things input related.
Anyway say you want to make a canvas project that will work well with both mouse and touch events. So in other words you do not want to do anything with multi touch on touch devices, or even if you do bother with an array of touch objects that is something that you want to have off to the side sort of speak. It is still a good idea to want all events for both mouse and touch events to be mapped to certain events that are the same. However in order to do so a bit of parsing, adjusting values, and other things need to be preformed before calling some uniform handers that are to be called for both mouse and touch events.
So this will be a post on such a project that does what I just described, if you want to have multi touch support then it is still important to make additional functionality to support other means of control. Things might be different when it comes to making a mobile app, but this is a web application you are making after all. When I look at my site statistics most of my visitors are on desktop, but I still want things to work well on both desktop and mobile.
So lets start out with the module that will create the pointer manager of sorts. This module is a few helper methods and a single public method returned from within an IIFE module pattern. The public function is just called and when doing so I pass a state machine object that I will be getting to with a demo later in this post. However for now I think that I can just say that the state machine object has a reference to a canvas element in it. It is then this canvas element to which I would like to attach some event handlers.
At the top of the PMMT module I then have an out of canvas helper that will return true of the given canvas relative position is out of bounds for the canvas of the state object. I also have a helper that will return a pointer object from the current state of a state machine if the current state object has a pointer object else the function will return false if it does not. This will make more sense once I get to the main.js file where I have the current code for the main state machine object.
Here I have The attach pointer event helper method that will be called in the main public method of this pointer module. This helper function is then to attach dome events for handlers that will call the current corresponding state pointer methods if they are there. When doing so a position object will be passed as a first argument, followed by a reference to the state machine, and finally the event object. The position object will be relative to the canvas element rather than the window object thanks to the use of a method in my utility library for this example that I will be getting to in a later section.
Now for the public method, what this is called from outside the module all I have to do is pass my state object, and dom events will be attached to the canvas of the state object. This is then what I will be using in my main.js file to attach event handlers for the state machine. Once I do so it is then how I go about creating and adding states when it comes to adding additional logic as to what to do when it comes to working wih pointer events.
In this example I am making use of my usual get canvas relative helper method that is a typical additional to a utility library that I often use with my canvas examples. This method will return a canvas relative position from an event object that is passed from within an event hander that receives such an event object from its call back.
I have a post in which I get into the topic of getting a canvas relative point in general. For the sake of this project a solution like this works okay because I do not want or need to support multi-touch. If i did want to support multi-touch then I would still use a solution not all that different from this one only it would return an array of pointer objects.
In this utility library I also have my create canvas method that has become a kind of standard when it comes to all of my canvas examples. However the state of this kind of module will change a little from one example to the next. In this example it might have just two methods, but in other examples I might park a lot of various methods here that I might use in more than one module in an example, or copy and past to other utils library of other examples.
This is a canvas example after all, so just like all the other canvas examples I like to have a draw module where I park all the methods that I will be using to draw to a canvas element. Like all the draw modules I of course have the usual draw background method, and I have also made the draw ver method standard when it comes to these canvas examples as well.
When it comes to the nature of this example I am then just going to want to have a draw method that will render the current location a pointer object.
So now for a quick demo to see if this works as it should when given a simple state object that will work with it. This is an example that just results in a circle drawn at the center of the canvas, and both mouse and touch events can be used to move it around.
So lets start out with the html I just have a div element and then script tags linking to my pointer manager first, and then the main.js file that will follow.
When this demo is up and running it works as expected. I can use the mouse to click and hold on the canvas and then drag the circle around the canvas, once I release the mouse button the circle returns to the center of the canvas. The same can be done with touch events, and in any case if I leave the canvas it triggers an end event also. This results in a uniform behavior regardless if I am using a mouse, or touch screen as a pointer device.
So this is all just part of what might one day become a full canvas framework if I ever get to it. I am not sure if I can recommend taking the time to work out your own canvas framework rather than just using something that is out there. Sure there are advantages for doing so, and that is of course why I am taking the time to work out these examples. However I am paying a price for doing so as I find myself spending ore time making projects like this, and less time making actually games, animations, and productivity applications.
Still if I get some more time to come around and work on this example a little more there are maybe a few things that I would do differently, and it would be nice to add at least a few more things here and there to create some kind of simple demo game. One thing that comes to mind would be a simple object pool library to be used to create some buttons as well as some display objects to interact with for the sake of just better showing that this kind of module does work okay. With a little more polish, and some additional things stacked up on top of this I might be able to create something that is starting to look like some kind of framework, but maybe all of that is a matter for another post.