Javascript code only works in Chrome while Chrome Developer Tools are open

Question

I have a weird bug that only lets my Javascript code run properly if the Chrome developer tools is open. I have read all the other articles with different solutions including removing all console.log() statements and disabling caching for jQuery AJAX (I am not using jQuery) but they do not work.

When it boils down, I have a navigation bar, a video container, 9 pictures, then I have a canvas that I wish to draw on. The code is supposed to work on the canvas to allow drawing, but only works with chrome developer tools open.

The peculiar thing is if I remove 6 pictures such that I have only have 2 pictures remaining above the canvas, the canvas can be drawn upon without opening developer tools.

I don't think it is an issue of "being drawn but just not appearing on the screen" since I have the correct offsets for the drawings to appear, and even if I didn't, it should not work even if I have developer tools open.

Here is the simplified html file:



    
        
        
        
        
    

    
        
            Buy High, Sell Low 
        
        
            Javier Liu
        
    
    
        
        
            
              Welcome to BHSL
              Basic Trading Patterns
              Always buy at highest, sell at cheapest!
              Don't actually do this. Not financial advice.
                
                    
                
            
        
        
    
    
        
            
                
                    
                        
                            
                                Ascending & DescendingTriangles
                                Continuation Pattern
                            
                        
                        
                            
                        
                    
                
            
            
                
                    
                        
                            
                                Cup  and Handle
                                Continuation Pattern
                            
                        
                        
                            
                        
                
            
            
                
                    
                        
                            
                                Flags  and Pennants
                                Continuation Pattern
                            
                        
                        
                            
                        
                
            
            
                
                    
                        
                            
                                Top and Bottom  Rectangles
                                Continuation Pattern
                            
                        
                        
                            
                        
                
            
            
                
                    
                        
                            
                                Double  Tops & Bottoms
                                Reversal Pattern
                            
                        
                        
                            
                        
                
            
            
                
                    
                        
                            
                                Triple  Tops & Bottoms
                                Reversal Pattern
                            
                        
                        
                            
                        
                
            
            
                
                    
                        
                            
                                Falling & Rising  Wedges
                                Reversal Pattern
                            
                        
                        
                            
                        
                
            
            
                
                    
                        
                            
                                Head and Shoulders
                                Reversal Pattern
                            
                        
                        
                            
                        
                
            
            
                
                    
                        
                            
                                Diamond Tops & Bottoms
                                Reversal Pattern

This is the JavaScript file:

var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false, coordinates = [];
var curvematcher = require('curve-matcher')

const init = () => {
    canvas = document.getElementById('can');
    canvas.style.backgroundColor = "#fffcf5";
    ctx = canvas.getContext("2d");
    ctx.canvas.width = window.innerWidth * .80;
    w = canvas.width;
    h = canvas.height;
    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
}

const draw = () => {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY + 669);
    ctx.lineTo(currX, currY + 669);
    console.log("x: " + currX + " y: " + currY);
    coordinates.push({x:prevX, y: prevY + 669});
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.closePath();
}

const erase = () => {
    var m = confirm("Are you sure you want to clear the entire board?");
    // coordinates.forEach((item, i) => {
    //  console.log(" {x: " + coordinates[i].x + ", y: " + coordinates[i].y + "},");
    // });
    if (m) {
        coordinates = [];
        ctx.clearRect(0, 0, w, h);
    }
}

const findxy = (res, e) => {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        flag = true;

    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            draw();
        }
    }
}

init()

Like I said, what really bugs me is that if I move the canvas up to the top, or if I remove some images, then the canvas can be drawn upon properly. I feel like if I put the canvas on another page then it would defintely work, but I don't want to be forced to have the canvas separate from the images, as they are important together, and I would immensely prefer if it were below the images.

Is there an issue regarding how many images can be on a page? Or perhaps a constraint on the flow of canvases on a page?

deathangel908 · Accepted Answer

You have incorrect calculations for xy, which goes beyond canvas.

If your canvas is located down in the page with the scroll

canvas.offsetTop would be amount the space from the start of the scroll (grows to infinity when your scroll grows), but e.clientY would grow to window height (display height) which is a fix number.

I would suggest using mouseEvent.offsetX which is supported in ie9+ and test it in different conditions on different browsers. I tested it in Chrome and it works perfect w/ and w/o scroll.

 const findxy = (res, e) => {
    if (res == 'down') {
      prevX = currX;
      prevY = currY;
      currX = e.offsetX;
      currY = e.offsetY;

      flag = true;

    }
    if (res == 'up' || res == "out") {
      flag = false;
    }
    if (res == 'move') {
      if (flag) {
        prevX = currX;
        prevY = currY;
        currX = e.offsetX;
        currY = e.offsetY;
        draw();
      }
    }
  }

Javascript code only works in Chrome while Chrome Developer Tools are open

Answers (1)

Related Questions