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>

After refreshing your code will be executed all over again and you will not remember what was the previous color. Unless you store it in the localStorage. Look it up. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage — Guillaume Georges, Oct 24 '17 at 12:54
@RogerC Though, it could work on "random" right? So it sometimes is color 1 or color 2... This is actually what I ment. — Marcel, Oct 24 '17 at 12:57
Sounds like an XY problem. Really all you are trying to do is retrieve a random value from an array. — chazsolo, Oct 24 '17 at 13:01
Possible duplicate of [Getting a random value from a JavaScript array](https://stackoverflow.com/questions/4550505/getting-a-random-value-from-a-javascript-array) — chazsolo, Oct 24 '17 at 13:04
Yup, if you want randomness, you don't need the localStorage — Guillaume Georges, Oct 24 '17 at 13:04

score 2 · Answer 1 · answered Oct 24 '17 at 13:06

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>

answered Oct 24 '17 at 13:06

where I say document.body.style.background, you could call init(container, 5000, 3000, '#f8fa58'); instead and choose the two colors, I just wanted a simple isolated example – Oct 24 '17 at 13:11

score 1 · Accepted Answer · answered Oct 24 '17 at 13:01

1

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);

answered Oct 24 '17 at 13:01

Ritesh Nair

3,327
1
17
24

A problem with random is that sometimes the colors will repeat – Oct 24 '17 at 13:07
@Ritz I tried to implement it in the code but this does not make it work in this specific piece of coding... – Marcel Oct 24 '17 at 13:34

score 0 · Answer 3 · answered Oct 24 '17 at 13:12

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>

Make color in JS change on refresh of browser

3 Answers3