My First Web Page: Lesson 12
Introduction to HTML Graphics: Canvas
W3Schools.com: Taking Your Web Page Skills to the Next Level
- Introduction: A Sampler
- Lesson 2: Styles and Layout
- Lesson 3: Adding Beautiful Mathematics to your web page
- Lesson 4: Interacting with your web page
- Lesson 5(a): Adding a GeoGebra Applet
- Lesson 5(b): Adding a Geometry Expressions Applet
- Lesson 6(a): Creating a GeoGebra Assessment Task
- Lesson 6(b): Creating a Geometry Expressions Assessment Task
- Lesson 7: Interacting with Third Party Apps
- Lesson 8: JavaScript, STEM and Internal Device Sensors
- Lesson 9: JavaScript, STEM and GPS
- Lesson 10: Adding Web Bluetooth Support (1): Talking to your SensorTag
- Lesson 11: Adding Web Bluetooth Support (2): Talking to your LaunchPad
- Lesson 12: Introduction to HTML Graphics: Canvas
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 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!
Questions? Feel free to email me.
©2019 Compass Learning Technologies ← Live Mathematics on the Web ← Create Your Own Live Web Pages