HTML Canvas Lag

Question

So I've created a canvas that when you hover your mouse over top of it a green 32x32 box appears. The canvas is very large so you could draw massive portraits, the problem is that drawing the green box has made the canvas and my whole browser laggy.

The part that I added that made it laggy:

function makeTileCover(mousex, mousey) {
    ctx.strokeStyle = "green";
    ctx.strokeRect(mousex, mousey, 32, 32);
    ctx.stroke();
}

I'm guessing that there's some simple answer to fix this, it seems like it might be drawing too many times because the square gets darker the more you hover over it all though I'm not sure that that would fix it anyway.

var canvas = document.getElementById("MapEditor");
var ctx = canvas.getContext("2d");

function updateCanvas() {
  container = document.getElementById("container");
  if (container.width != window.innerWidth) {
    container.style.width = window.innerWidth - 250;
  }
  if (container.height != window.innerHeight) {
    container.style.height = window.innerHeight;
  }
}

//Destroy mouse on canvas exit.
canvas.addEventListener('mouseout', function() {
  document.body.style.cursor = 'auto';
});

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

canvas.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  var mousex = Math.round(mousePos.x / 32) * 32;
  var mousey = Math.round(mousePos.y / 32) * 32;
  var cursor = document.createElement('canvas'),
    cursorctx = cursor.getContext('2d');

  cursor.width = 32;
  cursor.height = 32;

  makeTileCover(mousex, mousey);

  document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
  document.getElementById('mousePosLocation').innerHTML = "Mouse location:" + "<b id='mousex'>" + mousex + "</b>" + "," + "<b id='mousey'>" + mousey + "</b>";
}, false);

function makeTileCover(mousex, mousey) {
  ctx.strokeStyle = "green";
  ctx.strokeRect(mousex, mousey, 32, 32);
  ctx.stroke();
}

canvas {
  background-color: black;
}

<div id="container">
  <canvas width="16384" height="16384" id="MapEditor"></canvas>
</div>

Answer 1

The problem is your canvas is way too big and chrome can't handle the memory required for it. You really never want the canvas to be bigger than what can fit on the screen. (Typically going to be around 1080x1920). Combining that with @ScottMichaud 's answer we get

HTML

<div id="container">
   <canvas width="1638" height="900" id="MapEditor"></canvas>
</div>

JS

 var canvas = document.getElementById("MapEditor");
  var ctx = canvas.getContext("2d");
  var MousePos = {x:0, y:0};
  function updateCanvas() {
    container = document.getElementById("container");
    if (container.width != window.innerWidth) {
      container.style.width = window.innerWidth - 250;
    }
    if (container.height != window.innerHeight) {
      container.style.height = window.innerHeight;
    }
  }

  //Destroy mouse on canvas exit.
  canvas.addEventListener('mouseout', function() {
    document.body.style.cursor = 'auto';
  });
  function Update(){
    window.requestAnimationFrame(Update);
    var mousex = Math.round(MousePos.x / 32) * 32;
    var mousey = Math.round(MousePos.y / 32) * 32;
    ctx.fillRect(0,0,canvas.width,canvas.height);
    makeTileCover(ctx, mousex, mousey);
  }
  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }

  canvas.addEventListener('mousemove', function(evt) {
    MousePos = getMousePos(canvas, evt);

    // var cursor = document.createElement('canvas'),
    //   cursorctx = cursor.getContext('2d');

    // cursor.width = 32;
    // cursor.height = 32;

    // makeTileCover(mousex, mousey);

    // document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
    // document.getElementById('mousePosLocation').innerHTML = "Mouse location:" + "<b id='mousex'>" + mousex + "</b>" + "," + "<b id='mousey'>" + mousey + "</b>";
  }, false);

  function makeTileCover(ctx, mousex, mousey) {
    ctx.strokeStyle = "green";
    ctx.strokeRect(mousex, mousey, 32, 32);
    ctx.stroke();
  }
  Update();

I also changed the canvas so every frame it refills the canvas to black so you don't get a bunch of squares populating the view and only have the one for where the cursor is.