JavaScript Canvas Trigonometry Tutorial

Posted by Derek Banas on Apr 29, 2019 in Web Design | 0 comments

In this tutorial I teach a Ton about Canvas and All of the Trigonometry you need to make games and graphics programs while making a real project. I walk you step-by-step through the design of the app. If you want to get good at designing real applications then this tutorial is for you.

All of the code follows the video below to help you learn.

This nearly 40 minute tutorial contains only one 5 second skippable ad. If you think tutorials like this should remain free, please consider turning off Ad Blockers.

Code from the Video

jstut6.js

// Radius of circle
const RADIUS = 200;
// Circle center points
const X_CIRCLE_CENTER = 300;
const Y_CIRCLE_CENTER = 300;

let canvas;
let ctx;

class MousePosition {
    constructor(x, y) {
        this.x = x,
        this.y = y;
    }
}

// Holds changing mouse position
let mousePos = new MousePosition(0,0);

// Call for our function to execute when page is loaded
document.addEventListener('DOMContentLoaded', setupCanvas);

function setupCanvas(){
    // Get reference to canvas element
    canvas = document.getElementById("my-canvas");
    // Get methods for manipulating the canvas
    ctx = canvas.getContext("2d");
    drawCanvas();
    // Execute redrawCanvas when the mouse moves
    canvas.addEventListener("mousemove", redrawCanvas);
}

function drawCanvas(){
    // Create border
    drawRectangle("#839192", 5, 0, 0, 600, 600);
    // Create circle
    drawCircle("#839192", 1, X_CIRCLE_CENTER, Y_CIRCLE_CENTER, RADIUS, 0, 2 * Math.PI);
    // Create guide lines
    drawLine("#839192", 1, X_CIRCLE_CENTER, 0, X_CIRCLE_CENTER, 600);
    drawLine("#839192", 1, 0, Y_CIRCLE_CENTER, 600, Y_CIRCLE_CENTER);
}

function redrawCanvas(evt){
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Redraw canvas
    drawCanvas();

    // Call for MousePosition object to be updated 
    getMousePosition(evt);

    // Draw x & y coordinates using updated MousePosition settings
    drawTextAtPoint(ctx, "X : " + mousePos.x, 15, 25);
    drawTextAtPoint(ctx, "Y : " + mousePos.y, 15, 45);

    // Get angle in degrees and draw text
    let angleOfMouseDegrees = getAngleUsingXAndY(mousePos.x, mousePos.y);
    drawTextAtPoint(ctx, "Degrees : " + angleOfMouseDegrees, 15, 65);

    // Calculates hypotenuse and opposite sides and draws
    // them
    drawTriangle(angleOfMouseDegrees);
}

function drawRectangle(strokeColor, lineWidth, startX, startY, endX, endY){
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = lineWidth;
    ctx.strokeRect(startX, startY, endX, endY);
}

function drawCircle(strokeColor, lineWidth, xCircCenter, yCircCenter, radius, arcStart, arcEnd){
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = lineWidth;
    ctx.beginPath();
    ctx.arc(xCircCenter, yCircCenter, radius, arcStart, arcEnd);
    ctx.stroke();
}

function drawLine(strokeColor, lineWidth, xStart, yStart, xEnd, yEnd){
    // Move to start of line
    ctx.moveTo(xStart, yStart);
    // Move to end of line
    ctx.lineTo(xEnd, yEnd);
    // Draw line
    ctx.stroke();
}

function drawTextAtPoint(ctx, text, x, y){
    ctx.font = "15px Arial";
    ctx.fillText(text,x,y);
}

function getMousePosition(evt){
    // Get the canvas size and position relative to the web page
    let canvasDimensions = canvas.getBoundingClientRect();
    // Get canvas x & y position
    mousePos.x = Math.floor(evt.clientX - canvasDimensions.left);
    mousePos.y = Math.floor(evt.clientY - canvasDimensions.top);

    // Convert to coordinate graph
    mousePos.x -= 300;
    mousePos.y = -1 * (mousePos.y - 300);
    return mousePos;
}

// Returns the angle using x and y
// x = Adjacent Side
// y = Opposite Side
// Tan(Angle) = Opposite / Adjacent
// Angle = ArcTan(Opposite / Adjacent)
function getAngleUsingXAndY(x, y){
    let adjacent = x;
    let opposite = y;

    return radiansToDegrees(Math.atan2(opposite, adjacent));
}

function radiansToDegrees(rad){
    if(rad < 0){
        // Correct the bottom error by adding the negative
        // angle to 360 to get the correct result around
        // the whole circle
        return (360.0 + (rad * (180 / Math.PI))).toFixed(2);
    } else {
        return (rad * (180 / Math.PI)).toFixed(2);
    }
}

function degreesToRadians(degrees){
    return degrees * (Math.PI / 180);
}

function drawTriangle(angleDegrees){
    // Draw hypotenuse
    ctx.moveTo(X_CIRCLE_CENTER, Y_CIRCLE_CENTER);

    // Cosine = Adjacent / Hypotenuse so
    // xEndPoint = xStartPoint + radius * cos(angle) [angle in radians]
    let xEndPoint = X_CIRCLE_CENTER + RADIUS * Math.cos(degreesToRadians(angleDegrees));

    // Sine = Opposite / Hypotenuse so
    // yEndPoint = yStartPoint + radius * sin(angle) [angle in radians]
    let yEndPoint = Y_CIRCLE_CENTER + RADIUS * -(Math.sin(degreesToRadians(angleDegrees)));
    drawTextAtPoint(ctx, "Radians : " + degreesToRadians(angleDegrees).toFixed(2), 15, 85);

    ctx.lineTo(xEndPoint, yEndPoint);
    ctx.stroke();

    // Draw Opposite Line
    ctx.moveTo(xEndPoint, yEndPoint);
    ctx.lineTo(xEndPoint, 300);
    ctx.stroke();

    // Draw text for x & y
    drawTextAtPoint(ctx, "(" + xEndPoint.toFixed(2) + "," + yEndPoint.toFixed(2) + ")", xEndPoint + 10, yEndPoint - 10);

    // Calculate the hypotenuse length (Stays Constant)
    let hypotenuseLength = getLineLength(X_CIRCLE_CENTER, Y_CIRCLE_CENTER, xEndPoint, yEndPoint);
    drawTextAtPoint(ctx, "Hypot L : " + hypotenuseLength.toFixed(2), 15, 105);

    // Calculate the opposite length
    let oppositeLength = getLineLength(xEndPoint, yEndPoint, xEndPoint, 300);
    drawTextAtPoint(ctx, "Opp L : " + oppositeLength.toFixed(2), 15, 125);

}

// Distance = √((x2 - x1)² + (y2 - y1)²)
function getLineLength(x1, y1, x2, y2){
    let xS = x2 - x1;
    xS = xS * xS;
    let yS = y2 - y1;
    yS = yS * yS;
    return Math.sqrt(xS + yS);
}

Jstut6.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">        
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>JavaScript Canvas Trigonometry</title>
        <link rel="stylesheet" type="text/css" href="mainstyle.css">
        <script src="jstut6.js"></script>
        
    </head>
    <body>
        <div class="wrapper">

            <canvas id="my-canvas" width="600" height="600"></canvas>

        </div>
    </body>
</html>

mainstyle.css

.wrapper {
    max-width: 500px;
    margin: auto;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

jstut6.js

// Radius of circle

const RADIUS = 200;

// Circle center points

const X_CIRCLE_CENTER = 300;

const Y_CIRCLE_CENTER = 300;

let canvas;

let ctx;

class MousePosition {

constructor(x, y) {

this.x = x,

this.y = y;

}

// Holds changing mouse position

let mousePos = new MousePosition(0,0);

// Call for our function to execute when page is loaded

document.addEventListener('DOMContentLoaded', setupCanvas);

function setupCanvas(){

// Get reference to canvas element

canvas = document.getElementById("my-canvas");

// Get methods for manipulating the canvas

ctx = canvas.getContext("2d");

drawCanvas();

// Execute redrawCanvas when the mouse moves

canvas.addEventListener("mousemove", redrawCanvas);

}

function drawCanvas(){

// Create border

drawRectangle("#839192", 5, 0, 0, 600, 600);

// Create circle

drawCircle("#839192", 1, X_CIRCLE_CENTER, Y_CIRCLE_CENTER, RADIUS, 0, 2 * Math.PI);

// Create guide lines

drawLine("#839192", 1, X_CIRCLE_CENTER, 0, X_CIRCLE_CENTER, 600);

drawLine("#839192", 1, 0, Y_CIRCLE_CENTER, 600, Y_CIRCLE_CENTER);

}

function redrawCanvas(evt){

// Clear canvas

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Redraw canvas

drawCanvas();

// Call for MousePosition object to be updated

getMousePosition(evt);

// Draw x & y coordinates using updated MousePosition settings

drawTextAtPoint(ctx, "X : " + mousePos.x, 15, 25);

drawTextAtPoint(ctx, "Y : " + mousePos.y, 15, 45);

// Get angle in degrees and draw text

let angleOfMouseDegrees = getAngleUsingXAndY(mousePos.x, mousePos.y);

drawTextAtPoint(ctx, "Degrees : " + angleOfMouseDegrees, 15, 65);

// Calculates hypotenuse and opposite sides and draws

// them

drawTriangle(angleOfMouseDegrees);

}

function drawRectangle(strokeColor, lineWidth, startX, startY, endX, endY){

ctx.strokeStyle = strokeColor;

ctx.lineWidth = lineWidth;

ctx.strokeRect(startX, startY, endX, endY);

}

function drawCircle(strokeColor, lineWidth, xCircCenter, yCircCenter, radius, arcStart, arcEnd){

ctx.strokeStyle = strokeColor;

ctx.lineWidth = lineWidth;

ctx.beginPath();

ctx.arc(xCircCenter, yCircCenter, radius, arcStart, arcEnd);

ctx.stroke();

}

function drawLine(strokeColor, lineWidth, xStart, yStart, xEnd, yEnd){

// Move to start of line

ctx.moveTo(xStart, yStart);

// Move to end of line

ctx.lineTo(xEnd, yEnd);

// Draw line

ctx.stroke();

}

function drawTextAtPoint(ctx, text, x, y){

ctx.font = "15px Arial";

ctx.fillText(text,x,y);

}

function getMousePosition(evt){

// Get the canvas size and position relative to the web page

let canvasDimensions = canvas.getBoundingClientRect();

// Get canvas x & y position

mousePos.x = Math.floor(evt.clientX - canvasDimensions.left);

mousePos.y = Math.floor(evt.clientY - canvasDimensions.top);

// Convert to coordinate graph

mousePos.x -= 300;

mousePos.y = -1 * (mousePos.y - 300);

return mousePos;

}

// Returns the angle using x and y

// x = Adjacent Side

// y = Opposite Side

// Tan(Angle) = Opposite / Adjacent

// Angle = ArcTan(Opposite / Adjacent)

function getAngleUsingXAndY(x, y){

let adjacent = x;

let opposite = y;

return radiansToDegrees(Math.atan2(opposite, adjacent));

}

function radiansToDegrees(rad){

if(rad < 0){

// Correct the bottom error by adding the negative

// angle to 360 to get the correct result around

// the whole circle

return (360.0 + (rad * (180 / Math.PI))).toFixed(2);

} else {

return (rad * (180 / Math.PI)).toFixed(2);

}

function degreesToRadians(degrees){

return degrees * (Math.PI / 180);

}

function drawTriangle(angleDegrees){

// Draw hypotenuse

ctx.moveTo(X_CIRCLE_CENTER, Y_CIRCLE_CENTER);

// Cosine = Adjacent / Hypotenuse so

// xEndPoint = xStartPoint + radius * cos(angle) [angle in radians]

let xEndPoint = X_CIRCLE_CENTER + RADIUS * Math.cos(degreesToRadians(angleDegrees));

// Sine = Opposite / Hypotenuse so

// yEndPoint = yStartPoint + radius * sin(angle) [angle in radians]

let yEndPoint = Y_CIRCLE_CENTER + RADIUS * -(Math.sin(degreesToRadians(angleDegrees)));

drawTextAtPoint(ctx, "Radians : " + degreesToRadians(angleDegrees).toFixed(2), 15, 85);

ctx.lineTo(xEndPoint, yEndPoint);

ctx.stroke();

// Draw Opposite Line

ctx.moveTo(xEndPoint, yEndPoint);

ctx.lineTo(xEndPoint, 300);

ctx.stroke();

// Draw text for x & y

drawTextAtPoint(ctx, "(" + xEndPoint.toFixed(2) + "," + yEndPoint.toFixed(2) + ")", xEndPoint + 10, yEndPoint - 10);

// Calculate the hypotenuse length (Stays Constant)

let hypotenuseLength = getLineLength(X_CIRCLE_CENTER, Y_CIRCLE_CENTER, xEndPoint, yEndPoint);

drawTextAtPoint(ctx, "Hypot L : " + hypotenuseLength.toFixed(2), 15, 105);

// Calculate the opposite length

let oppositeLength = getLineLength(xEndPoint, yEndPoint, xEndPoint, 300);

drawTextAtPoint(ctx, "Opp L : " + oppositeLength.toFixed(2), 15, 125);

}

// Distance = √((x2 - x1)² + (y2 - y1)²)

function getLineLength(x1, y1, x2, y2){

let xS = x2 - x1;

xS = xS * xS;

let yS = y2 - y1;

yS = yS * yS;

return Math.sqrt(xS + yS);

}

Jstut6.html

<!doctype html>

<head>

<title>JavaScript Canvas Trigonometry</title>

</head>

<body>

</div>

</body>

</html>

mainstyle.css

.wrapper {

max-width: 500px;

margin: auto;

}

	Facebook
	YouTube
	Twitter
	LinkedIn

JavaScript Canvas Trigonometry Tutorial

Leave a Reply Cancel reply