What math does the HTML5 canvas require?

burnedfaceless
burnedfaceless used Ask the Experts™
on
The HTML5 canvas is an element that can generate graphics on the fly with JavaScript.

An example of it being used to graph equations can be found here: http://matt.might.net/articles/rendering-mathematical-functions-in-javascript-with-canvas-html/

I'm trying to figure out what math I will need to take to use the canvas to create interactive applications.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2016

Commented:
add/subtract/multiply and divide and percentages.
HTML5 is the 5th version of Hyper Text Markup Language
MathML is not widely supported in browsers you will want to use mathjax
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Typically for me, basic geometry and trigonometry.  In the graphing sample you mentioned above, and in most "graphic" (ie just rendering sharp pictures and layouts, not necessarily graphing), I end up making heavy use of basic trig functions.

sin, cos, tan, circle intersections, etc....
And understanding basic angle relationships and manipulation.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Yes, all of those functions are available.  You will see them in the example links I provided.

Look at d3 for example https://github.com/d3/d3/wiki/Gallery  All the graphs are in going to be done in the same manner.  You may want to incorporate that library so you don't have to reinvent the wheel.  Or look at https://www.chartjs.org/

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial