title: Creating Rainbow Gradient CreateJS
body: <p>****Edit*** I have figured out the issue my next question is, why is that if I change the first X point and leave the others at 0 that I get my desired gradient effect?</p>
  
  <p><a href="https://i.stack.imgur.com/zmJ2x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zmJ2x.png" alt="enter image description here"></a></p>
  
  <pre><code>function init(){
      var canvas = document.getElementById("easel"),
      SIZE = 250,
      centerX = canvas.width/2,
      centerY = canvas.height/2;
  
  ////////////////////////////////////
  ///////// Rainbow Arc /////////////
  //////////////////////////////////  
      var newStroke = new createjs.Shape();
      //newStroke.graphics.beginStroke("#000");
      newStroke.graphics.beginLinearGradientStroke(["#ff0000","#ff6600","#ffff00","#009933","#0033cc","#4b0082","#551a8b"], [0,.14,.28,.42,.56,.70,.84,.98], 190,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
      newStroke.graphics.setStrokeStyle(20, 1, 1);
      newStroke.graphics.arc(100,100,50, 0 ,180*(Math.PI/180), true);
  </code></pre>