Adding a random color parameter to a function

Question

Exactly as the title says, I'm trying to add a random color parameter (as a 4th parameter) to a pre-existing function. I have tried many things but nothing has been working.

That is what I'm working with. I know, it's not efficient but I'm a beginner. It's a smiley face. I need to add a random color parameter so that only the first 'fillStyle' gets changed but the rest of the colors remain the same. How can I achieve this?

var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function pintaSmiley(cX, cY, s) {
  "use strict";
  context.beginPath();
  context.fillStyle = "yellow";
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size);
}

pintaSmiley(centerX, centerY, size * 14);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5);

<canvas id="cnv"><</canvas>

Answer 1

You could perhaps use the HSL Color mode and use it with a random hue value.

context.fillStyle = "hsl("+Math.round(Math.random()*360)+",100%,50%)";

var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function pintaSmiley(cX, cY, s, hue) {
  "use strict";
  context.beginPath();
  context.fillStyle = "hsl("+hue+",100%,50%)";
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size, Math.round(Math.random()*360));
}

pintaSmiley(centerX, centerY, size * 14, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4, Math.round(Math.random()*360));
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5, Math.round(Math.random()*360));

<canvas id="cnv"><</canvas>

Answer 2

You can use function for generate random color.

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function pintaSmiley(cX, cY, s) {
  "use strict";
  context.beginPath();
  context.fillStyle = getRandomColor();
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size);
}

pintaSmiley(centerX, centerY, size * 14);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5);

<canvas id="cnv"><</canvas>

Answer 3

You mean

context.fillStyle = ["yellow","red","green"][Math.floor(Math.random()*3)];

or perhaps

var bgArr = ["yellow","red","green"];
var rndBg = bgArr[Math.floor(Math.random()*bgArr.length)];
pintaSmiley(centerX, centerY, size, rndBg);

using

function pintaSmiley(cX, cY, s, bg) {
  "use strict";
  context.beginPath();
  context.fillStyle = bg;

Here is the first:

var canvas = document.getElementById("cnv"),
  context = canvas.getContext('2d'),
  width = 500,
  height = 500;

function pintaSmiley(cX, cY, s) {
  "use strict";
  context.beginPath();
  context.fillStyle = ["yellow","red","green"][Math.floor(Math.random()*3)];
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

for (i = 0; i < 94; i = i + 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  pintaSmiley(centerX, centerY, size);
}

pintaSmiley(centerX, centerY, size * 14);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.1);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.2);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.3);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.4);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
pintaSmiley(centerX, centerY, size + 0.5);

<canvas id="cnv"><</canvas>