Use this file to bootstrap a new freewheel image. Add a function and initial state then hit generate, then save the image and share it.

function (canvas, state, completion) {
  var ctx = canvas.getContext('2d');

var padding = 40;
  var boardWidth = WIDTH - 2 * padding;
  var boardHeight = HEIGHT - 2 * padding;
  var squareDimension = boardWidth / 8;

var turn = state.turn;
  var boardState = state.board;

for (var i = 0; i != 8; i++) {
    for (var j = 0; j != 8; j++) {
      if ((i + j) % 2 == 0) {
        ctx.fillStyle = 'red';
      } else {
        ctx.fillStyle = 'black';
      }
      ctx.fillRect(padding + j * squareDimension, padding + i * squareDimension, squareDimension, squareDimension);
    
      if (boardState[i * 8 + j] == 'R') {
        ctx.fillStyle = 'red';
        ctx.beginPath();
        ctx.arc(padding + j * squareDimension + squareDimension / 2, padding + i * squareDimension + squareDimension / 2, squareDimension / 2 - 4, 0, Math.PI * 2, true);
        ctx.fill();
      }
      if (boardState[i * 8 + j] == 'B') {
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.arc(padding + j * squareDimension + squareDimension / 2, padding + i * squareDimension + squareDimension / 2, squareDimension / 2 - 4, 0, Math.PI * 2, true);
        ctx.fill();
      }
    
    }
  }

var drawTurnText = function() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, HEIGHT - padding, WIDTH, padding);
    ctx.fillStyle = 'black';
    var turnText = state.turn == "R" ? "Red's Turn" : "Black's Turn";
    ctx.font = "16px serif";
    ctx.textAlign = "center";
    ctx.fillText(turnText, WIDTH / 2, HEIGHT - 20, 320);
  }

drawTurnText();
  
  var selectedRow = -1;
  var selectedCol = -1;
  canvas.addEventListener('click', function(event) {
    var x = event.offsetX - padding, y = event.offsetY - padding;
    var row = Math.floor(y / squareDimension);
    var col = Math.floor(x / squareDimension);
  
    if (selectedRow == -1) {
      selectedRow = row;
      selectedCol = col;
    } else {
      if (turn == 'B') {
        ctx.fillStyle = 'red';
      } else {
        ctx.fillStyle = 'black';
      }
      ctx.fillRect(padding + selectedCol * squareDimension, padding + selectedRow * squareDimension, squareDimension, squareDimension);
      if (turn == 'B') {
        ctx.fillStyle = 'black';
      } else {
        ctx.fillStyle = 'red';
      }
      ctx.beginPath();
      ctx.arc(padding + col * squareDimension + squareDimension / 2, padding + row * squareDimension + squareDimension / 2, squareDimension / 2 - 4, 0, Math.PI * 2, true);
      ctx.fill();
  
      var selectedLinearIndex = selectedRow * 8 + selectedCol;
      state.board = state.board.substr(0, selectedLinearIndex) + ' ' + state.board.substr(selectedLinearIndex + 1);
      var linearIndex = row * 8 + col;
      if (turn == 'B') {
        state.turn = 'R';
        state.board = state.board.substr(0, linearIndex) + 'B' + state.board.substr(linearIndex + 1);
      } else {
        state.turn = 'B';
        state.board = state.board.substr(0, linearIndex) + 'R' + state.board.substr(linearIndex + 1);
      }
    
      selectedRow = -1;
      selectedCol = -1
      drawTurnText();
    
      completion(state);
    }
  });
}