Small error here (beginner btw)

I have been using a tutorial. I’m not finished with the video but, I have a small error here that isn’t in the video.

I have debugged and have found the exact line where the problem is:

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

I’m guessing the problem is that I am calling clientX on evt(undefined). However, I don’t know how I would fix this problem. I will show the code and video. Help would be appreciated.

jstut6.html (The problem has nothing to do with this):

<!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>

jstut6.js (problem is here):

const RADIUS = 200;
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;
  }
}
let mousePos = new MousePosition(0,0);
document.addEventListener('DOMContentLoaded', setUpCanvas);

function setUpCanvas(){
    canvas = document.getElementById("my-canvas");
    ctx = canvas.getContext("2d");
    drawCanvas();
    canvas.addEventListener("mousemove", redrawCanvas());
}
function drawCanvas(){
    drawRectangle("#839192", 5, 0, 0, 600, 600);
    drawCircle("#839192", 1, X_CIRCLE_CENTER, Y_CIRCLE_CENTER, RADIUS, 0,
    2 * Math.PI);
    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){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawCanvas();
    getMousePosition(evt);
    drawTextAtPoint("X : " + mousePos.x, 15, 25);
    drawTextAtPoint("Y : " + mousePos.y, 15, 45);
}

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){
     ctx.moveTo(xStart, yStart);
     ctx.lineTo(xEnd, yEnd);
     ctx.stroke();
}
function drawTextAtPoint(text, x, y){
    ctx.font = "15px Arial";
    ctx.fillText(text,x,y);
}
function getMousePosition(evt){
     let canvasDimensions = canvas.getBoundingClientRect();
     mousePos.x = Math.floor(evt.clientX - canvasDimensions.left);
     mousePos.y = Math.floor(evt.clientY - canvasDimensions.top);
     mousePos.x -= 300;
     mousePos.y = -1* (mousePos.y - 300);
     return mousePos;
}

function getAngleUsingXAndY(x,y){}

function radiansToDegrees(rad){
    if(rad < 0){
        return (360.0 + (rad * (180/Math.PI))).toFixed(2);
    } else {
        return (rad * (180/Math.PI)).toFixed(2);
    }
}

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

function drawTriangle(){}
function getLineLength(){}

mainstyle.css:

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

video: https://www.youtube.com/watch?v=GDTHmH9mZWA&list=PLGLfVvz_LVvTP2Op3wZlaGTUcgCfDuwn8&index=6&t=76s

hey @Josh641,

In your setUpCanvas function you are calling redrawCanvas function on the eventListener it should be like this…

function setUpCanvas(){
    canvas = document.getElementById("my-canvas");
    ctx = canvas.getContext("2d");
    drawCanvas();
    canvas.addEventListener("mousemove", redrawCanvas);
}
1 Like

Thanks again for the help! Is there any techniques I could use for debugging?

1 Like

Oh, and it now works!

1 Like

To debug i work my way backwards until i find the problem, and remember to use console.log() if you need to find out what the variables are too.

So you found out this problem correct and it was the evt that was undefined, so what i done next is just go backwards through each function until i found what was causing the problem.

so evt is a parameter of the getMousePosition function so we go check where that function is being called from, which was inside redrawCanvas()
and evt is being passed through here and everything looks fine here so we go back again to where redrawCanvas is called from, and thats where we find the problem because you were calling the function by adding the () to it instead of passing it as a reference to the eventListener

Thanks for the debugging advice! I very much appreciate it.

1 Like