How do I get a one-sided gradient effect for createJS beginLinearGradientStroke?

Question

I'm working on a gradient stroke for a "loading circle" using createJS. However, I only need the gradient effect to be applied on one "joining point" of the two colors, and not apply it on the other joining point.

What I did was this, but it's only giving me a normal gradient effect:

    var rd = 64;      
    timerCount.graphics.setStrokeStyle(8)
    /*                              yellow  ,red*/
      .beginLinearGradientStroke( ["#F7CC00","#FE1D1E"]  ,[0,1]  ,0,rd*0.5  ,0,-rd );

Please refer to the image below:

Anyone knows how I can do this?

Here's my code in JSFiddle: https://jsfiddle.net/flamedenise/gg9aabug/18/

Thank you and Happy New Year ahead!

Answer 1

I have managed to create a workaround to achieve this! Since beginLinearGradientStroke() only creates a "normal" gradient, I figured out overlaying it with another gradient (with transparent as the second color) would work.

What I did was create the first circle with two colors that appear as "solid" (by setting the ratios and x and y positions accordingly) and then overlaid it with another gradient circle - with one color the combination of the first two colors, and the other one transparent.

Here's the JSFiddle showing the final outcome: https://jsfiddle.net/flamedenise/n9no9Lgw/

  var rd = 64;/*radius*/
  var circles = {};
  var ic = [
      /*0*/{ a:"#FEC331" ,b:"#FB1E24"     ,r1:0.5 ,r2:0.5 ,x0:0   ,y0:rd*0.3 ,x1:0  ,y1:-rd},
      /*1*/{ a:"#EA6F2B" ,b:"transparent" ,r1:0   ,r2:1   ,x0:-rd ,y0:0      ,x1:rd ,y1:0  }
  ];

  var circleX = [ 0.5 ,0.75  ];
  var circleY = [ 0.7 ,0.7   ];

  for(var i=0; i<2; i++){  
    circles[l][i] = new createjs.Shape();
    circles[l][i].graphics.setStrokeStyle(8)
      .beginLinearGradientStroke( [ ic[k].a ,ic[k].b ],  [ic[k].r1,  ic[k].r2],  ic[k].x0,ic[k].y0  ,ic[k].x1,ic[k].y1 );

      circles[l][i].rotation = -90;
    circles[l][i].x = ww*circleX[l];      
    circles[l][i].y = wh*circleY[l];

    var arcCommand = circles[l][i].graphics.arc(0, -20, rd, 600 * Math.PI, 0).command;
    if (run == 1) {
      createjs.Tween.get(arcCommand)
        .to({
          endAngle: (360 * Math.PI / 180)
        }, time * 1000);
    }

    circleStage.addChild(circles[l][i]);
  }/*END for loop*/

Answer 2

You are not looking for a radial gradient, but rather a conical gradient (or angle gradient in Photoshop), which Canvas does not support directly. I did a quick search on Angle Gradients, and found a few ideas that might help:

• http://www.nixtu.info/2010/08/html5-canvas-gradients-angular-gradient.html
• https://gist.github.com/akm2/3721702
• Angle gradient in canvas

Best of luck.