CSS convert gradient to the canvas version

Question

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)");

I just need to convert the CSS version to the canvas version with the addColorStop function. — ng2user, Jul 11 '17 at 12:15

Blindman67 · Answer 1 · 2021-10-01T13:44:00.993

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>

Hitesh · Answer 2 · 2018-12-21T07:55:07.453

2

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>

edited Dec 21 '18 at 07:55

answered Jul 11 '17 at 12:31

Hitesh

362
2
13

I have just edit my answer please review this. @ng2user – Hitesh Jul 11 '17 at 12:33
It's close, missing the white in the bottom. – ng2user Jul 11 '17 at 12:34
Still you need any help? – Hitesh Jul 11 '17 at 12:38
missing the white in the bottom. – ng2user Jul 11 '17 at 13:14
It's Done Now . – Hitesh Dec 21 '18 at 07:57

score 2 · Accepted Answer · answered Jul 11 '17 at 14:13

2

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>

answered Jul 11 '17 at 14:13

ɢʀᴜɴᴛ

32,025
15
116
110

Thanks. How can I stretch more the white space? – ng2user Jul 12 '17 at 08:04

CSS convert gradient to the canvas version

3 Answers3

Linked