Canvas ctx.draw doesn't work, maybe behind an HTML element?

Question

I'm working on a fun puzzle game at the moment, and I'm using a mix of HTML elements and Canvas drawing.

For the UI involving buttons and such, it's all HTML and CSS, whereas the actual tile grid is created using a canvas. I'd previously set up the canvas and grid, but after creating some UI, when I draw the grid it no longer appears.

Perhaps it's behind some element that has display: none, but I'm not sure.

Any help is much appreciated.

var c = document.getElementById('canvas'),
  ctx = c.getContext('2d')

global.screenID = 'nothing';

function update() {
  render.clear()
  render.drawBackground()

  if (screenID === 'menu') {
    document.getElementById('groupSelectWrapper').style.display = 'block'
  } else if (screenID === 'group1LevelSelect') {
    document.getElementById('levelSelectWrapper').style.display = 'block'
  } else if (screenID === 'group1') {
    ctx.fillStyle = '#FF0000'
    ctx.rect(50, 50, 50, 50);
    boardFunctions.makeGrid(3);
  }
  window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);

This function is in another file:

makeGrid: function(numTiles) {
  var gridMatrix = []
  var gridSize = getGridSize();
  var locCoords = getGridLocation();

  var backgroundTile = new Image();
  backgroundTile.src = '../../../assets/tileImages/backgroundTile.png';

  var a = 0;
  var b = 0;

  for (var x = 0; x < numTiles; x++) {
    a = locCoords[0] + (x * (gridSize / numTiles))
    gridMatrix[x] = [];
    for (var y = 0; y < numTiles; y++) {
      b = locCoords[1] + (y * (gridSize / numTiles))
      gridMatrix[x][y] = [a, b];
      ctx.drawImage(backgroundTile, a, b, (gridSize / numTiles) - 5, (gridSize / numTiles) - 5);
    }
  }
  return gridMatrix
}

There are no errors, and like I said it has worked in the past so I'm a little confused.

Thanks!