Vanilla JavaScript for-of loop doesn't complete all iterations

Question

I'm building a SET! game in JavaScript. I've created a deck (mainDeck) of the 81 cards in the deck and spliced a dozen cards out (cardsOnBoard) into an array of objects, to create the initial cards on the game board. When I loop through the cardsOnBoard to add them to the board, the loop only adds 10 of the 12 initial cards. I'm not seeing where or why it's failing. What am I missing?

var cardsOnBoard = {
  0: null,
  1: null,
  2: null,
  3: null,
  4: null,
  5: null,
  6: null,
  7: null,
  8: null,
  9: null,
  10: null,
  11: null,
  12: null,
  13: null,
  14: null,
  15: null,
  16: null,
  17: null
}

function createSetDeck() {
  const color = ["red", "green", "purple"]
  const shape = ["cylinder", "diamond", "squiggle"]
  const fill = ["outline", "solid", "filled"]
  const number = ["1", "2", "3"]

  for (var c = 0; c < color.length; c++) {
    for (var s = 0; s < shape.length; s++) {
      for (var f = 0; f < fill.length; f++) {
        for (var n = 0; n < number.length; n++) {
          var card =( {
          Color: color[c],
          Shape: shape[s],
          Fill: fill[f],
          Number: number[n]} )
          
          mainDeck.push(card)
        }      
      }
    }
  }
  return mainDeck
}
createSetDeck()
  
// SHUFFLE THE DECK WITH A FISHER-YATES SHUFFLE
function shuffle (inputArr) {
  var shuffledDeck = inputArr
  for (var i = inputArr.length - 1; i >= 0; i--) {
    var randomIndex = Math.floor(Math.random() * (i + 1))
    var randomItem = shuffledDeck[randomIndex]
    shuffledDeck[randomIndex] = shuffledDeck[i]
    shuffledDeck[i] = randomItem
  }
}
shuffle(mainDeck)

// DRAW A NUMBER OF CARDS FROM THE MAINDECK
function draw(num) {
  var drawn = mainDeck.splice(0, num)
  return drawn
}
// DRAW A DOZEN INITIAL CARDS
cardsOnBoard = new draw(12)

// CREATE THE GAMEBOARD OF 18 AVAILABLE CARD SLOTS
for (let i = 0; i < 18; i++) {
  div = document.createElement('div');
  div.id = i;
  div.classList.add('cardslot');
  div.addEventListener('click', function() 
  {
    selectedSlots.push(this.id);
  });
  document.body.appendChild(div);
}

function renderCardsOnBoard() {
  for (let [key] of Object.keys(cardsOnBoard)) {
    const shape = cardsOnBoard[key].Shape
    const color = cardsOnBoard[key].Color
    const fill = cardsOnBoard[key].Fill
    const number = cardsOnBoard[key].Number
    img = document.createElement('img')
    img.classList.add('cardImage')
    document.getElementById(key).appendChild(img);
    document.getElementById(key).querySelector('.cardImage').src = './img/' + shape + '-' + color + '-' + fill + '-' + number + '.png'
    console.log(img)
  }
}
renderCardsOnBoard()

The bottom-most function (renderCardsOnBoard) isn't filling cardslot 11 and 12 with cards from cardsOnBoard.