Why do canvas and consoles conflict?

Question

css

When you open the page, everything works great. But it is worth opening the console and everything disappears, and it does not give an error. Everything is fine with the other canvas. Some problem in the code, but where, I can not understand.

<canvas id="drawingCanvas" width="1500" height="800"></canvas>

var PAINTRECT = {x:0, y:0, width:1500, height:800};
  var circles = [];
  
  var path; 
  // eslint-disable-next-line camelcase
  var element_rand;
  // eslint-disable-next-line camelcase
  var get_image;
  
  
  var canvas = document.getElementById('drawingCanvas');	
  var context  = canvas.getContext('2d');
  
  (function drawCirclesUpdate() {
    context.clearRect(0, 0, 1500, 800);
    for(var i=0; i<circles.length; i++) {
      var circle = circles[i];
      if(circle.currentX !== circle.x) {
        circle.x = circle.currentX;
      }
      if(circle.currentY !== circle.y) {
        circle.y = circle.currentY;
      }
  
      var img = new Image();
      img.src = circle.img;
      context.drawImage(img,circle.x, circle.y, circle.radius,circle.radius);
    }
    window.drawCirclesUpdate = drawCirclesUpdate;
  }).call();
  
  (function processFrame() {
    for(var i=0; i<circles.length; i++) {
      var tile = circles[i];
      if(tile.force > 0.0001) {
        tile.moveX *= tile.force;
        tile.moveY *= tile.force;
        tile.moveRotation *= tile.force;
        tile.currentX += tile.moveX;
        tile.currentY += tile.moveY;
        tile.rotation += tile.moveRotation;
        tile.rotation %= 360;
        tile.force *= 0.9;
        if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width) {
          tile.moveX *= -1;
        }
        if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height) {
          tile.moveY *= -1;
        }
      }else{
        tile.force = 0;
      }
    }
    window.processFrame = processFrame;
  }).call();
  
  canvas.onmousemove = () => dropBomb(event, canvas);


  context.save();

  setInterval('processFrame()', 33);
  setInterval('drawCirclesUpdate()', 33);
    

  for(var i = 0; i < 20; i++) {
    addRandomCircle(40,80, 1);
  }
  for(var i = 0; i < 20; i++) {
    addRandomCircle(120,160, 2);
  }
  for(var i = 0; i < 20; i++) {
    addRandomCircle(260,300, 3);
  }
  // eslint-disable-next-line camelcase
  function addRandomCircle(size_bottom, size_top, layout) {
    var radius = randomFromTo(size_bottom, size_top);
    var x = randomFromTo(0, canvas.width);
    var y = randomFromTo(0, canvas.height);

    var colors = ['green', 'blue', 'red', 'yellow', 'magenta', 'orange', 'brown', 'purple', 'pink'];
    var color = colors[randomFromTo(0, 1)];

    var circle = new Circle(x, y, radius, color, layout);
    var offsetX = radius;
    var offsetY = radius;
    circle.originX = offsetX+x;
    circle.originY = offsetY+y;
    circle.currentX = circle.originX;
    circle.currentY = circle.originY;

    circles.push(circle);

    drawCircles();
  }
  function randomFromTo(from, to) { return Math.floor(Math.random() * (to - from + 1) + from);
  }

  function drawCircles() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Перебираем все круги
    for(var i=0; i<circles.length; i++) {
      var circle = circles[i];
      var img = new Image(); 
      img.src = circle.img;
      context.drawImage(img,circle.x, circle.y, circle.radius,circle.radius);
    }
  }

  function dropBomb(evt, obj) {
    var posx = 0;
    var posy = 0;
    var e = evt || window.event;
    if (e.pageX || e.pageY) {
      posx = e.pageX;
      posy = e.pageY;
    }else if (e.clientX || e.clientY) {
      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    var canvasX = posx-obj.offsetLeft;
    var canvasY = posy-obj.offsetTop;
    explode(canvasX, canvasY);
  }
  function explode(x, y) {
    for(var i=0; i<circles.length; i++) {
      var tile = circles[i];
      
      var xdiff = tile.currentX-x;
      var ydiff = tile.currentY-y;
      var dist = Math.sqrt(xdiff*xdiff + ydiff*ydiff);
      
      var randRange = 220+(Math.random()*30);
      var range = randRange-dist;
      var force = tile.forceMod*(range/randRange);//this.forceMod



      if(force > tile.force) {
        tile.force = force;
        var radians = Math.atan2(ydiff, xdiff);
        tile.moveX = Math.cos(radians);
        tile.moveY = Math.sin(radians);
        tile.moveRotation = 0.5-Math.random();
      }
    }
    circles.sort(zindexSort);
  }
  function zindexSort(a, b) {
    return (a.layout-b.layout);
  }

  //Объект круга
  function Circle(x, y, radius, color, layout) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.isSelected = false;

    this.originX = 0;
    this.originY = 0;
    this.currentX = 0;
    this.currentY = 0;
    this.rotation = 0;
    this.force = 0;
    this.forceMod = 3;
    this.z = 0;
    this.layout = layout;
    // eslint-disable-next-line eqeqeq
    if(layout == 1) {
      path = 'small';
      // eslint-disable-next-line camelcase
      element_rand = 15;
      this.forceMod = 1;
    }
    // eslint-disable-next-line eqeqeq
    if(layout == 2) {
      path = 'medium';
      // eslint-disable-next-line camelcase
      element_rand = 16;
      this.forceMod = 2;
    }
    // eslint-disable-next-line eqeqeq
    if(layout == 3) {
      path = 'large';
      // eslint-disable-next-line camelcase
      element_rand = 9;
      this.forceMod = 3;
    }
    // eslint-disable-next-line camelcase
    get_image = parseInt(Math.random() * (element_rand - 1) + 1);
    // eslint-disable-next-line camelcase
    this.img = '/images/canvas/'+path+'/' + get_image + '.png';
    this.moveX= 0;
    this.moveY= 0;
    this.moveRotation = 0;

  }

Answer 1

Most likely it's not in the console, but in changing the size of the viewport. Try resizing the window, if the effect is the same - look for a resize handler.