Trig Problems Solved With Canvas

Posted on by Kebman

Using HTML5 Canvas to solve trigonometric problems

1.0 Description

From the origin of the circle, line \(h\)—the hypotenuse—stretches upwards at an angle \(\theta\) of \(30°\). The length of the line is equal to the radius of the circle (in this case 90px).

1.1. Finding The Adjacent

Based on the previous information we will find how long \(\text{cathetus A}\)—the adjacent—is on the X-axis until it reaches \(\text{cathetus B}\).

To find the adjacent cathetus, you need to do this formula: \(\cos(\theta) = \frac{\text{adjacent } (x)}{\text{hypotenuse } (h)}\)

  • \(\theta\) stands for the angle
  • \(x\) stands for the unknown length of the adjacent cathetus
  • ...and \(h\) stands for the hypotenuse.

Just fill inn some blanks: \(cos(30) = \frac{adjacent (x)}{hypotenuse (90)}\)

Then calculate \(sin(30)\):

Math.cos(30*Math.PI / 180.0) = 0.86602540378443864676372317075294

And you get: \(0.866 = \frac{x}{90}\)

Then use algebra and switch sides: \(\frac{x}{90} = 0.866\)

Use algebra again and move a number away from the unknown so it is possible to calculate, however according to the rules of algebra it means the division operator must also change to a multiplication operator (the opposite operator), so we get: \(x = 0.866 * 90\)

Then calculate, and you find that \(x = 77.942286340599478208735085367764\)

1.2 Finding The Opposite

Based on the previous information we will find the height of \(\text{cathetus B}\)—the opposite—on the Y-axis.

To find the opposite cathetus, you need to do this formula: \(\text{sin}(\theta)=\frac{\text{opposite}(y)}{\text{hypotenuse}(h)}\)

Just fill inn some blanks: \(sin(30) = \frac{opposite (y)}{hypotenuse (90)}\)

Then calculate \(sin(30)\): 

Math.sin(30*Math.PI / 180.0) = 0.5

And you get: \(0.5 = \frac{y}{90}\)

Then use algebra and switch sides: \(\frac{y}{90} = 0.5\)

Use algebra again and move a number away from the unknown so it is possible to calculate, however according to the rules of algebra it means the division operator must also change to a multiplication operator (the opposite operator), so we get: \(y = 0.5 * 90\)

Then calculate, and you find that \(y = 45\)

And there you have it!