JavaScript Color Gradient

How to get color value from gradient by percentage with javascript?

I was able to solve this issue using this function, which is based on the less.js function: http://lesscss.org/functions/#color-operations-mix

function pickHex(color1, color2, weight) {
    var w1 = weight;
    var w2 = 1 - w1;
    var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
        Math.round(color1[1] * w1 + color2[1] * w2),
        Math.round(color1[2] * w1 + color2[2] * w2)];
    return rgb;
}

I just simply need to pass the two closest color codes from the gradient array and the ratio where the slider handle is located(which can be calculated easily with the help of the slider width). Here is the live example:

http://jsfiddle.net/vksn3yLL/

How to apply gradient color in chart.js?

Your gradient does not apply because of your useEffect hook, in this hook you set the data again with your formatData function but only pass the data and no canvasGradient. So you will need to pass that too.

See with lines 108 and 109 commented out it works fine, so you will need to either recreate the gradient there or create it on a higher level so you only create it once.
https://codesandbox.io/s/chart-js-react-typescript-forked-dxlj7?file=/src/App.tsx

Edit:

Updated to different method, in your formatData function for the backgroundColor use ternary operator to check if canvas gradient is given if not take the current backgroundColor

Color gradient renders as black

In your example you referenced library as

<script type="text/javascript" src="js/paper.js"></script>

however jsfiddle does not know about that local assert with path: js/paper.js.

Code snippet is not working since paper.js is not loaded.

In order to make it work for jsfiddle environment you might want to include CDN hosted version of the library:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>

Working example in jsfiddle

Or run your original code snippet on your localhost with library which hosted on your localhost as well under js/paper.js path.

Random Color Generator and how to apply it to my existing Gradient

convert to hex
do not reuse the color1/color2 variables
set the color before converting

Note: You many want to loop the second color in case you get the same value

const rgbToHex = rgb => '#' + (rgb.match(/[0-9|.]+/g).map((x, i) => i === 3 ? parseInt(255 * parseFloat(x)).toString(16) : parseInt(x).toString(16)).join('')).padStart(2, '0').toUpperCase();

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var button1 = document.querySelector(".button1");

function setGradient() {
  body.style.background =
    "linear-gradient(to right, " +
    color1.value +
    ", " +
    color2.value +
    ")";

  css.textContent = body.style.background + ";";
}

function randomColorGenerator() {
  var col1 = "rgb" + "(" + (Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ")" + ";");

  var col2 = "rgb" + "(" + (Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ", " +
    Math.floor(Math.random() * 255) +
    ")" + ";");
    console.log(col1)
    color1.value=rgbToHex(col1)
    color2.value=rgbToHex(col2)
    console.log(color1.value,color2.value)
    setGradient()
}

color1.addEventListener("input", setGradient);

color2.addEventListener("input", setGradient);

button1.addEventListener("click", randomColorGenerator);

<body id="gradient" onload="setGradient()">
  <h1>Background Generator</h1>
  <input class="color1" type="color" name="color1" value="#00ff00">
  <input class="color2" type="color" name="color2" value="#ff0000">
  <h2>Current CSS Background</h2>
  <button class='button1'>Random Color</button>
  <h3></h3>
  <script type="text/javascript" src="script.js"></script>

</body>

Webkit text gradient with random colors using javascript

background-clip works with background-image and background-color (rather than background). In your case - a linear/radial gradient set through javascript, you need to use backgroundImage

var colors = ['#58D68D', '#F1C40F', '#68C4EC', '#EC7063', "#F39C12", "#979A9A", "#40B5AD", "#A52A2A"];
randcol = colors[Math.floor(Math.random() * colors.length)];
randcoltwo = colors[Math.floor(Math.random() * colors.length)];
gradcol = '-webkit-linear-gradient(left,' + randcol + ' ,' + randcoltwo + ')';
document.getElementById('randomgrad').style.backgroundImage = gradcol;

#randomgrad {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 72px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color:transparent;
}

<div id="randomgrad">Random Gradient</div>