HTML/Javascript Canvas Geometry Tracing Game Tutorial

HTML/Javascript Canvas Geometry Tracing Game Tutorial

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.

In today’s tutorial we mainly use the drawImage and lineTo functions to create a webpage where you can draw lines tracing existant images shown on the canvas.

This game illustrates the mapping skill known as hard copy digitising, and though the author claims no expertise here, you score better if you digitise the same way, because the amount out you are will determine how much is taken off your score in a survival game … the longer you survive with a positive score the better you are. As a note, if your digitising is diabolically bad, it could be a zooming issue!

With the ellipse and the circle you need to close close to your starting point to get your digitised area evaluated.

You may want to read more at HTML Canvas Reference as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow.

You may notice several similarities thinking about today’s tutorial “workings” to that of yesterday’s HTML/Javascript Canvas Slope of a Line Primer Tutorial, three of which we’d like to focus your attention on …

1. both use an HTML canvas positioned, nominally within the second column, second row of an HTML table element’s HTML td “cell” (all overseen by an HTML div element horizontally centrally aligned), yet the HTML canvas uses position:absolute; with numerically specified top: and width: and height: but percentage specified left:50%; … why? … to allow for a canvas element not tucked up in the top left corner, but positioned where the table cell would be anyway (and where users are probably more comfortable seeing it), yet …
2. both web applications use co-ordinates, used in the context of the functionality of the HTML canvas element, where it is not important “absolutely” … we only need to know co-ordinates “relatively” to achieve the functionality we set out to achieve, but must retain “scale” to be functional, so …
3. the onresize event can be handled by restarting the web application via location.href=[URL_of_web_application]; and the left:50%; is “reworked” for the new window width that results

… as it may be unusual to see a position:absolute; scenario not having all numerically specified top:_s and width:_s and height:_s and left:_s, and yet am often longing not to be tied down by this totally numerically specified scenario … so wanted to show that the left:50%; seems to work okay for a lot of web browser and platforms here, and yesterday. Whether it would work if the web application needs an absolute co-ordinate system is doubtful … there would be a lot more thought needed to achieve the same result for an absolute co-ordinate system web application such as one locating exact objects on Earth, for example.

As you can see, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.

Here is a link to some downloadable HTML programming code … rename to geometry_tracing.html

We hope you enjoy this Mathematical tutorial live run.

If this was interesting you may be interested in this too.