HTML Canvas Touch Position

I’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..

<script>
#myCanvas {
background-color: rgba(158, 167, 184, 0.2);
}
</script>

<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.

In 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.

http://codepen.io/scargill/pen/wgPLrv

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!!