Почему конфликтуют canvas и консоли?

Question

iMurser @iMurser

Почему конфликтуют canvas и консоли?

При открытии страницы, все работает замечательно. Но стоит открыть консоль и всё пропадает, причем не выдает ошибки. С другим канвасом все нормально. Какая-то проблема в коде, а где, понять не могу.

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

  }