Random Radial Gradient Color for Circle using JavaScript-CodePudding

I am new to Javascript. I am trying to create a circle filled with white on one color stop and a random color for the second color stop to create a radial gradient effect. However, I am getting this error: Uncaught DOMException: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('undefined') could not be parsed as a color.

I would appreciate any suggestions.

I tried to break it down into 2 steps.

The first step was to create a circle filled with two colors (white: inner, pink:outer) to create a radial gradient effect which I did.
https://jsfiddle.net/RE006/sv8guk62/103/

The second step: which is where I am coming across problems: https://jsfiddle.net/RE006/sv8guk62/105/

My goal was to create a circle filled with two colors (white: inner, random color: outer) to create a radial gradient effect.

Error: Uncaught DOMException: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('undefined') could not be parsed as a color.

HTML:

<canvas id="circle"></canvas>

Javscript:

document.addEventListener('DOMContentLoaded', function() {
    var c =   document.getElementById("circle");
    var ctx = c.getContext("2d");

    //Arc(x, y, width, height, startAngle, arcAngle) 
    fillArc(100, 70, 70, 0, 6.28);

    function fillArc() {
       ctx.beginPath();
       ctx.arc.apply(ctx, arguments);
     }


    function newGradient() {
        var randomColor1 = "#"   Math.floor(Math.random()*16777215).toString(16);
     }

    // Create gradient
    // (x0,y0,r0 (starting circle),x1,y1, r1(ending circle))
    var grd = ctx.createRadialGradient(100,60,5,100,60,50);
        grd.addColorStop(0,"white");
        grd.addColorStop(1,newGradient());

    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fill();
 });

CodePudding user response：

In newGradient function you forgot to return the value