# Introduction to HTML Graphics: Canvas

W3Schools.com: Taking Your Web Page Skills to the Next Level

## Canvas Clock

 So much is possible with HTML graphics that it is hard to know where to start. Rather than try to cover introductory ground that is much better done elsewhere, here we just see some examples of what can be achieved relatively simply, and leave you to spend the time you need at the relevant web sites. Study the JavaScript code for each example and feel free to adapt it for your own pages.

## Solar Animation with Images

 Mozilla.org is another excellent source for HTML and JavaScript tutorials.

## Function Grapher with Sliders

This one has been adapted from the source, adding the ability to enter your own functions and the wonderful MathJax to display the mathematics correctly, where possible. Sliders have been added to bring this simple plotter to life!

 v = 0  h = 0

## Polygon Animation with Sliders

 Polygon sides:  Polygon radius:  Fill hue color:  Stroke hue color:  X:  Y:

# Irrational SpiderWeb

Can you imagine Pythagoras dreaming of spirals?

Use the slider below to see what he might have seen.

Compare the code using HTML Canvas with the Lua equivalent. What do you notice?

n = 1

# Exploring Continued Fractions

The tools for exploration here are provided by HTML and JavaScript, with the canvas providing the visual representation.

Compare the code using HTML Canvas with the Lua equivalent. What do you notice?

 Every real number, rational and irrational, can be represented as a continued fraction. While normal fractions can only represent rational numbers, continued fractions are different. Rational numbers produce finite continued fractions, while irrationals become infinite continued fractions. Study the examples which follow and see what you notice. ${37 \over 15} = 2 + \cfrac{1}{2 + \cfrac{1}{7}}$

Enter a mathematical value to convert to a continued fraction (eg 1.625, 37/15, sqrt(2), cbrt(2), pi, e, phi or any JavaScript Math term, such as Math.sin(pi/4) or even Math.random() - but watch out! Case is important!).

Use the slider to study the first few steps of your continued fraction...

## Lua, JavaScript and HTML Canvas

And why not take your web pages to the next level by embedding Lua scripts using the canvas element?

## Try Your Own: Web Page Template

Take some time to play! Study the web page code for each of our samples, and try making changes to see the effect - just tap Display My Page below to see your version live!