Chartjs-Chartjs gradient with angle

by

1👍

You are correct in identifying the issue as the angle! Your issue here is that the way CSS linear-gradient interprets "angle".

For CSS:

The gradient line’s angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.

Visualization of the angles:

enter image description here

When working with Javascript canvas, however, your origin lies with positive x to the right and positive y to the bottom, creating something that looks like this:

enter image description here

This is causing your gradient to actually be set up in a location off the canvas! Accounting for this, you can match the gradient by setting the same color stops as your CSS code, but adjusting the angle to be 45 degrees. Here’s a working example of this:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const angle = 45 * Math.PI / 180;
var x2 = 400 * Math.cos(angle);  // angle in radians
var y2 = 400 * Math.sin(angle);  // angle in radians
var g1 = ctx.createLinearGradient(0, 0, x2, y2);
    g1.addColorStop(0, '#FBCF33');   
    g1.addColorStop(0.9, '#F53939');
    ctx.fillStyle = g1;
    ctx.fillRect(0, 0, 400, 400);
div{
   width:400px;
   height:400px; 
   background: linear-gradient(135deg, #FBCF33 0%, #F53939 90%);
}
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
        <div></div>
        <canvas id="canvas" width="400" height="400"></canvas>
        <script src="index.js"></script>
    </body>
</html>

Leave a comment