HTML/Javascript Canvas Geometry Tracing Game Tutorial

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.

This entry was posted in eLearning, Event-Driven Programming, Land Surveying, Tutorials and tagged , , , , , , , , , , , , , , , . Bookmark the permalink.

9 Responses to HTML/Javascript Canvas Geometry Tracing Game Tutorial

  1. stupid says:

    Great beat ! I wish to apprentice whilst you amend your web site, how could i subscribe for a weblog web site?
    The account aided me a applicable deal. I were a little bit acquainted of this your broadcast provided
    bright clear idea

  2. Have you ever thought about creating an e-book or guest authoring on other websites? I’ve a weblog based upon on exactly the same subjects you discuss and would really like to have you share some stories/information. I know my visitors would value your work. If you are even remotely interested, feel no cost to shoot me an e mail.

  3. krk says:

    This website is my aspiration , quite fantastic pattern and perfect articles .

  4. ask says:

    I think this is one of the most vital info for me. And i’m glad reading your article. But want to remark on some general things, The web site style is perfect, the articles is really nice : D. Good job, cheers

  5. Admirable says:

    Great thoughts you possess here.. Excellent opinions you have got here.. So pleased to get discovered this submit.. My internet surfing seem total.. thank you.

  6. travis says:

    I would like to thank you for the efforts you’ve put in penning this website. I’m hoping to view the same high-grade content from you later on as well. In truth, your creative writing abilities has motivated me to get my very own site now ;)|

  7. You can certainly see your enthusiasm within the work you write. The sector hopes for more passionate writers like you who are not afraid to say how they believe. All the time go after your heart.

  8. love to read your blog

  9. arpita says:

    very useful knowledge, thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>