I have a gradient that I need to apply to a canvas.

section {
  width: 440px;
  height: 171px;
  background-image: linear-gradient(185deg, #39adb2 0%, rgba(255, 255, 255, 0.24) 100%), linear-gradient(to top, rgba(152, 227, 230, 0.18) 0%, rgba(196, 229, 255, 0) 99%, rgba(196, 229, 255, 0) 100%);
  opacity: 0.48;
}

<section></section>

I have a gradient that I need to apply to a canvas.

section {
  width: 440px;
  height: 171px;
  background-image: linear-gradient(185deg, #39adb2 0%, rgba(255, 255, 255, 0.24) 100%), linear-gradient(to top, rgba(152, 227, 230, 0.18) 0%, rgba(196, 229, 255, 0) 99%, rgba(196, 229, 255, 0) 100%);
  opacity: 0.48;
}

<section></section>

I need help to convert this to the canvas API; I don't have a clue how to do it. maybe there is an online tool?

  var gradientFill = ctx.createLinearGradient(100, 10, 100, 100);
  gradientFill.addColorStop(0, "#39adb2");
  gradientFill.addColorStop(0.99, "rgba(196, 229, 255, 0)");
  gradientFill.addColorStop(1, "rgba(196, 229, 255, 0)");
  gradientFill.addColorStop(0, "#39adb2");
  gradientFill.addColorStop(1, "rgba(152, 227, 230, 0.18)");

• javascript
• html
• css
• canvas

• Do you want it done programmatically or by hand? – Blindman67 Commented Jul 11, 2017 at 12:13
• I just need to convert the CSS version to the canvas version with the addColorStop function. – ng2user Commented Jul 11, 2017 at 12:15

3 Answers 3

Quick answer as I don`t have time to explain the math.

The angle extends the length of the gradient as it must fit the corners. To find solve a triangle that is the diagonal center line of the gradient.

I have change the gradient to show that it fits with a black start center and end. I am sure you can change to the gradient you need.

Image shows vars. Find length of hypt, use that to find fromTopRight and use that to find diag. Dist from center is len = hypt + diag. See code for step by step.

requestAnimationFrame(renderLoop);
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var cx = w / 2;
var cy = h / 2;
function drawDiagonalGrad(angDeg) {
    var cssAng = angDeg;
    canAng = cssAng - 90;
    var ang = (canAng - 90) * (Math.PI / 180);
    var hypt = cy / Math.cos(ang);
    var fromTopRight = cx - Math.sqrt(hypt * hypt - cy * cy);
    var diag = Math.sin(ang) * fromTopRight;
    var len = hypt + diag;

    var topX = cx + Math.cos(-Math.PI / 2 + ang) * len;
    var topY = cy + Math.sin(-Math.PI / 2 + ang) * len;
    var botX = cx + Math.cos( Math.PI / 2 + ang) * len;
    var botY = cy + Math.sin( Math.PI / 2 + ang) * len;

    var grad = ctx.createLinearGradient(topX,topY,botX,botY);
    grad.addColorStop(0,     'rgb(0,0,0)');
    grad.addColorStop(0.02,  'rgb(255,0,0)');
    grad.addColorStop(0.021, 'rgb(26,130,255)');
    grad.addColorStop(0.49,  'rgb(196,230,255)');
    grad.addColorStop(0.495, 'rgba(255,0,0)');
    grad.addColorStop(0.505, 'rgba(255,0,0)');
    grad.addColorStop(0.51,  'rgb(196,230,255)');
    grad.addColorStop(0.98,  'rgb(52,27,230)');
    grad.addColorStop(0.981, 'rgb(255,0,0)');
    grad.addColorStop(1,     'rgb(0,0,0)');

    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, 440,171);
 }
 
 

function renderLoop(time) {
    ctx.clearRect(0, 0, w, h);
    drawDiagonalGrad(Math.sin(time / 1000) * 44 + 45);
    requestAnimationFrame(renderLoop);
}

canvas {
   border : 1px solid black;
}

<canvas id="canvas" width = "440" height = "171"></canvas>

Here is how you can convert the CSS gradient to canvas version ...

var ctx = document.querySelector('#canvas').getContext('2d');

var grd = ctx.createLinearGradient(0, 0, 0, 171);
grd.addColorStop(0,"#39ADB2");
grd.addColorStop(0,"#98E3E6");
grd.addColorStop(1,"#FFFFFF");

ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);

<canvas id="canvas" width="440" height="171"></canvas>

Please try this.

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var grad = context.createLinearGradient(0,0,0,171);

    grad.addColorStop(0, 'rgba(196,230,255,1)');
    grad.addColorStop(1, 'rgba(255,255,255,1)');

    context.fillStyle = grad;
    context.fillRect(0, 0, 440,171);

<canvas id='canvas' width='440' height='171' ></canvas>