HTML Canvas Touch Position

tmp2D9EI’ve had some great fun the last few days working on my gauge – and as part of that I thought at one time of making it touch-sensitive. Thankfully my senses prevailed in the end but not before coming to terms with a need to understand how the HTML5 Canvas works.

If you’ve not played with this I highly recommend it. Great fun and just SO, SO very much better than computer-destroying FLASH.

Of course, many developers are well familiar with Canvas - but I wasn't - and yet it is essentially easy.  So I thought I'd jot down mouse stuff in case I need it in future - or someone else needs it.

So what you see upper right (just an image in this case) is a canvas area.  You can make an empty HTML page with nothing more than this in it..

#myCanvas {
background-color: rgba(158, 167, 184, 0.2);

<canvas id="myCanvas" width=350 height=350></canvas>

The first half is optional and is just to give the script a background colour so you can SEE it !!!

The second half defines a canvas area 350px square with the name (id) “myCanvas” – call it anything you like. Armed with that, in my gauge I have a nice curved set of blocks indicating 0-100 degrees.  I read up how to get the mouse position on "mouse up" – easy enough  - in a call-back function– you’ll see that in the jsFiddle code link below – you can play with this to your heart’s content in a browser.

My problem was – how do I convert that X/Y coordinate pair into something that tells me which part of the temperature curve I was in when I clicked the mouse!!! At that point I almost recoiled into my beer so I rang up my pal Peter Oakes in Canada who reminded me that 50 years ago at school I did algebra – and they rammed the sine rule into us.  It didn’t take long for it all to come back.  Reference the CENTRE of that canvas, any position is in one of 4 squares… and so depending which square the mouse is in, you can draw a right angled triangle from the mouse back to the centre and up (or down) to it’s X position.  Using a simple calculation you can then determine the angle up to 90 degrees. Again depending which of the four squares you are in – that totals up to 360 degrees – i.e. a circle. A little division as my gauges typically don’t use a complete circle and I end up with a value 0-100.

As it happens I didn’t need this but I’m sure anyone experimenting for the first time with Canvas interaction will find it useful – so here it is. Click in the area in the demo and you’ll see the angle and the X,Y coordinates of the mouse.

I’ve also put in the distance of the mouse from he centre. Using that, you could then define a narrow curved band in which you are interested in accepting values – or not.

IPossible use in a colour wheeln this case “touch” and “mouse” are interchangeable though clearly you can’t “hover” with a finger.

And just for good measure I added a pretty text gradient.

If you don't want to wait for mouse-button-pressing, change the reference in the code from mouseup to mousemove and press "run" - now you will get a continuous readout as long as the mouse is over the canvas area.

Let me in parting say this – my first few days of using Canvas were gruelling – and interacting with Node-Red even worse. With help from various people, all of that melted away and in my blog entries here you’ll see how to do the interaction. Now, I’m ready to go with Canvas, if you look at the last blog entry you’ll see I’ve tackled lots of things including text at arbitrary angled positions, arcs, inward shadows… slowly but surely it all comes together if you drink enough coffee.

It just occurred to me that if you wanted a colour control – one of those colour wheels, then the ANGLE would feed your colour wheel lookup… and the distance from the centre, the saturation with white at the centre!!


7 thoughts on “HTML Canvas Touch Position

  1. Just a small point Peter, but the mathematical convention is that the start point for rotation ie zero degrees is on the positive side of the x axis and then to rotate in an anti clockwise direction ie 90 degrees or pi/2 is on the positive side of the y axis. At the moment you appear to have 0 on the -x and rotate clockwise

  2. I've never been one for convention. If someone said to me "turn 90 degrees" - my first inclination, like a clock, would be to turn right. I just tested this out on my wife - who would also turn right. However, having verified that this is indeed the case, the new CodePen version of the code followed the convention - and it was a good excuse to get away from jsFiddle which has already lost two bits of my code.

    1. It really does not matter what convention you use, but the whole world is using a system like a clock although there is no degree, but the old imperial 0-12 indication for divisions. North = 0/360(navigation), yes and the normal way to increase is clockwise and not anti-clockwise! This is a non discussion.
      I only ask myself shouldn't there be more organizing than the flood of blogs - with excellent examples - but the remarks like look in my former blog to learn more is getting more and more difficult to use with the number of blog articles? Could not be a chapter in your manual doc?

        1. What I mean is the fact that with the publication of yet another blog item it is getting more difficult to find the references to former blog items which you refer to regularly. What your are doing is extending the use of your HC2016 by describing the interface to your software. I think there could be a chapter in your Word doc to explain the principles and refer to your blog for more examples.
          I have quite a lot of problems filling in the gaps in your stories from other locations on your blog. Can also be that I am not in the targeted users group, not enough IT background. To have a sort of skeleton how to create a user interface principles would probably help. You might have other ideas for it, but this is just a suggestion and how I experience all techtalk.

Comments are closed.