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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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; } |
Leave a Reply