Make color in JS change on refresh of browser

Question

I'm working on a piece of coding where I want the color of the erasable canvas to change on refresh.

It would be easier when the color was triggered in the css, though right now this is in the coding itself at these triggers;

var container = document.getElementById('canvas'); 
init(container, 5000, 3000, '#f8fa58');

How could i make it multiple (let's say 2) variable colours where it could pick from. So the specific colours would be on random when the website is being refreshed?

(function() {

  // a little verbose but...
  function handleMousemove(event) {
    var x = event.clientX;
    var y = event.clientY;
    draw(x, y);
  }

  function handleTouchmove(event) {
    event.preventDefault(); // we don't want to scroll
    var touch = event.touches[0];
    var x = touch.clientX;
    var y = touch.clientY;
    draw(x, y);
  }
  // this one can be shared by both touch and move events
  function activateDrawing(event) {
    event.preventDefault();
    canvas.isDrawing = true;
  }

  function draw(eventX, eventY) {
    var x = eventX - canvas.node.offsetLeft;
    var y = eventY - canvas.node.offsetTop;
    if (!canvas.isDrawing) {
      return;
    }
    var radius = 100; // or whatever
    var fillColor = '#ff0000';
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillCircle(x, y, radius, fillColor);
  }

  function createCanvas(parent, width, height) {
    var canvas = {};
    canvas.node = document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.width = width || 100;
    canvas.node.height = height || 100;
    parent.appendChild(canvas.node);
    return canvas;
  }

  var canvas, ctx; // got it out to avoid nesting too deeply my handlers;

  function init(container, width, height, fillColor) {
    canvas = createCanvas(container, width, height);
    ctx = canvas.context;
    // define a custom fillCircle method
    ctx.fillCircle = function(x, y, radius, fillColor) {
      var radgrad = ctx.createRadialGradient(x, y, 0, x, y, radius);
      radgrad.addColorStop(0, 'rgba(255,0,0,1)');
      radgrad.addColorStop(0.8, 'rgba(255,0,0,.9)');
      radgrad.addColorStop(1, 'rgba(255,0,0,0)');

      // draw shape
      ctx.fillStyle = radgrad;
      ctx.fillRect(x - radius, y - radius, x + radius, y + radius);
    };
    ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 1, width, height);
    };
    ctx.clearTo(fillColor || "#ddd");

    // bind mouse events
    canvas.node.onmousemove = throttle(handleMousemove);
    canvas.node.ontouchmove = throttle(handleTouchmove);
    canvas.node.onmouseenter =
      canvas.node.ontouchstart = throttle(activateDrawing);

  }

  var container = document.getElementById('canvas');
  init(container, 5000, 3000, '#f8fa58');

  /* Bonus : throttle these events so they don't fire too often */
  function throttle(callback) {
    var active = false; // a simple flag
    var evt; // to keep track of the last event
    var handler = function() { // fired only when screen has refreshed
      active = false; // release our flag 
      callback(evt);
    }
    return function handleEvent(e) { // the actual event handler
      evt = e; // save our event at each call
      if (!active) { // only if we weren't already doing it
        active = true; // raise the flag
        requestAnimationFrame(handler); // wait for next screen refresh
      };
    }
  }

})();

document.body.addEventListener('touchstart', function(e) {
  e.preventDefault();
});

body {
  overflow: hidden !important;
  margin-left: -10vw;
  margin-top: -30vh;
}

#back {
  z-index: -10;
  pointer-events: none;
  position: absolute;
  margin: 0;
  display: block;
  background: url(https://odlp-staging1.s3.amazonaws.com/uploads/2012/04/original_01_-belladonna-viviane-sassen-jpg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 110vw;
  height: 130vh;
}

#canvas {
  z-index: -1;
  top: 2vh;
  left: -10vw;
  width: 110vw;
  height: 130vh;
  overflow: hidden;
}

<div id="back"></div>
<div id="canvas"></div>

Answer 1

Write a function to generate a random color, and then call this function to get the random color:

function GetRandomColor() {
  var set = ["1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];

  var c1 = set[Math.floor(Math.random()*set.length)];
  var c2 = set[Math.floor(Math.random()*set.length)];
  var c3 = set[Math.floor(Math.random()*set.length)];
  var c4 = set[Math.floor(Math.random()*set.length)];
  var c5 = set[Math.floor(Math.random()*set.length)];
  var c6 = set[Math.floor(Math.random()*set.length)];
  var color = "#" + c1 + c2 + c3 + c4 + c5 + c6 ;

  return color ;
}

$(document).ready(function() {
  $("a").on("click", function() {
    var c = GetRandomColor() ;
    
    $("#color").css("background-color", c) ;
  });
});

#color{
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:;">Generate a random color</a>

<div id="color"></div>

Answer 2

A simple solution using url location hash to store the number of reloads:

<body>
<script>


const numberOfReloads = window.location.hash.substr(1) | 0;
window.location.hash = numberOfReloads + 1;


if (numberOfReloads % 2) {
    document.body.style.background = "red";
} else {
    document.body.style.background = "blue";
}

</script>
</body>

Answer 3

For random colors you can store the various color in array and then use random method.

var randomColors = ['#f8fa58','red','black'];
var bg = randomColors[Math.floor(Math.random()*randomColors.length)];
init(container, 5000, 3000, bg);