Changing color randomly Javascript

Question

Heys guys,

I am testing some stuff out with the native accelometer on my android phone, I want to draw rectangles, which works but I want them to be a different color everytime one is drawn.

Thank you in advance :)

    function onSuccess(acceleration) {

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.width = window.innerWidth;
context.height = window.innerHeight;

    context.save(); 
    context.beginPath();
    context.rect(acceleration.x*10+150, acceleration.y*10+100, acceleration.z*10, acceleration.y*10);
    context.fillStyle = '#FF0000';
    context.fill();
    context.lineWidth = 3;
    context.strokeStyle = 'black';
    context.stroke();
    context.restore(); 

}

function onError() {
    alert('onError!');
}

You can use any of these Paul Irish's codes: http://www.paulirish.com/2009/random-hex-color-code-snippets/ — Roy, Apr 07 '16 at 07:15

score 0 · Accepted Answer · edited May 23 '17 at 12:07

0

fillStyle should have random color instead of '#FF0000'

You can use random color by Paul Irish

function onSuccess(acceleration) {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  context.width = window.innerWidth;
  context.height = window.innerHeight;
  context.save();
  context.beginPath();
  context.rect(acceleration.x * 10 + 150, acceleration.y * 10 + 100, acceleration.z * 10, acceleration.y * 10);
  context.fillStyle = '#' + Math.floor(Math.random() * 16777215).toString(16);
  context.fill();
  context.lineWidth = 3;
  context.strokeStyle = 'black';
  context.stroke();
  context.restore();
}

function onError() {
  alert('onError!');
}

Edit: As suggested by Morten Olsen, provided approach may fail sometimes, You can refer this SO answer

edited May 23 '17 at 12:07

Community

1
1

answered Apr 07 '16 at 07:14

Rayon

36,219
4
49
76

There is a chance in the above that it would give fever charactors, for instance `'#' + Math.floor(23421).toString(16)` would be `'#5b7d'`, not a valid hex color – Morten Olsen Apr 07 '16 at 07:25
What will be the value of `Math.random()` to produce such result ? – Rayon Apr 07 '16 at 07:26
Math.floor(0.06 * 16777215).toString(16) as an example would result in #f5c28 – Morten Olsen Apr 07 '16 at 07:32

score 0 · Answer 2 · answered Apr 07 '16 at 07:15

Just take a function for it.

function randomColor() {
   var c = "#";
   for (var i = 0; i < 6; i++) {
       c += (Math.random() * 16 | 0).toString(16);
   } 
   return c;
}

var a = document.getElementById("id1").style;
a.color = randomColor();

<h1 id="id1">stackoverflow</h1>

score 0 · Answer 3 · edited May 23 '17 at 12:07

0

Assign a random color to fillStyle.

 context.fillStyle = "#"+((1<<24)*Math.random()|0).toString(16);

From this post

edited May 23 '17 at 12:07

Community

1
1

answered Apr 07 '16 at 07:16

Divyesh Savaliya

2,692
2
18
37

score 0 · Answer 4 · answered Apr 07 '16 at 07:17

0

Use this:

'#'+Math.floor(Math.random()*16777215).toString(16);

For more information: http://www.paulirish.com/2009/random-hex-color-code-snippets/

answered Apr 07 '16 at 07:17

Roy

1,939
1
14
21

Changing color randomly Javascript

4 Answers4