7

I have a circular arc drawn in canvas is it possible to give it linear gradient with three colors??

0

3 Answers 3

11

Yes, it's possible! There is a method in Javascript, named createLinearGradient which gets as source the canvas context and applies a gradient defined by sx, sy, dx, dy coordinates. The first two options defines the starting coordinates and last two the ending coordinates.

var gradient = context.createLinearGradient(sx, sy, dx, dy);

After invoking this method you can apply gradient colors to your canvas by calling the colorStop method:

gradient.addColorStop(0,   '#f00'); // red
gradient.addColorStop(0.5, '#ff0'); // yellow
gradient.addColorStop(1,   '#00f'); // blue

These are the basic ingredients for implementing a gradient on a canvas. The next step would be to calculate the circular color gradient positions if you need a circular gradient. This can be satisfied by the following formula:

var applyAngle = function (point, angle, distance) {
    return {
          x : point.x + (Math.cos(angle) * distance),
          y : point.y + (Math.sin(angle) * distance)
    };
};

Then plugin the resulted x and y position into the createLinearGradient method, which would create a nice looking circular gradient. Of course you need to use the arc method to make it circular.

2
  • What does 'distance' parameter represent in applyAngle function?
    – Kostas
    Aug 20, 2015 at 12:56
  • Excellent answer: @SimoEndre could you post a working example: how would you actually draw the arc?
    – taseenb
    Nov 27, 2015 at 17:02
8

I couldn't see the example that the OP posted (broken link?), but I had a very similar question and none of the answers here helped me.

So, this is what I wanted to do:

And this is how I did it:

var center = { "x": 115, "y": 115 };
var radius = 100;
var quadrants = [
	{
    	"angleStart": Math.PI * -0.5,
        "angleEnd": 0,
    	"x1": center.x,
        "y1": center.y - radius,
        "x2": center.x + radius,
        "y2": center.y,
        "colorStops": [
        	{ "stop": 0, "color": "blue" },
            { "stop": 1, "color": "green" }
        ]
    },
	{
    	"angleStart": 0,
        "angleEnd": Math.PI * 0.5,
    	"x1": center.x + radius,
        "y1": center.y,
        "x2": center.x,
        "y2": center.y + radius,
        "colorStops": [
        	{ "stop": 0, "color": "green" },
            { "stop": 1, "color": "yellow" }
        ]
    },
	{
    	"angleStart": Math.PI * 0.5,
        "angleEnd": Math.PI,
    	"x1": center.x,
        "y1": center.y + radius,
        "x2": center.x - radius,
        "y2": center.y,
        "colorStops": [
        	{ "stop": 0, "color": "yellow" },
            { "stop": 1, "color": "red" }
        ]
    },
	{
    	"angleStart": Math.PI,
        "angleEnd": Math.PI * 1.5,
    	"x1": center.x - radius,
        "y1": center.y,
        "x2": center.x,
        "y2": center.y - radius,
        "colorStops": [
        	{ "stop": 0, "color": "red" },
            { "stop": 1, "color": "black" }
        ]
    }    
];

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Draw arc quadrants.
for (var i = 0; i < quadrants.length; ++i) {
  var quad = quadrants[i];
  var grad = ctx.createLinearGradient(quad.x1, quad.y1, quad.x2, quad.y2);
  // Color stops.
  for (var j = 0; j < quad.colorStops.length; ++j) {
    var cs = quad.colorStops[j]; 
    grad.addColorStop(cs.stop, cs.color);
  }
  // Draw arc.
  ctx.beginPath();
  ctx.arc(center.x, center.y, radius, quad.angleStart, quad.angleEnd);
  ctx.strokeStyle = grad;
  ctx.lineWidth = 30;
  ctx.stroke();
}
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="230" height="230" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><strong>Note:</strong> The canvas tag is not supported in Internet 
Explorer 8 and earlier versions.</p>

</body>
</html>

And below is my draft idea before implementing it:

Linear gradient distribution on arc:

               ***********
          ***       |       ***
       **           |           **
     **             |             **
    *     _         |               *
  **       /|       |      \         **
 **       /         |      _\|        **
 *                  |                  *
*    4th Quadrant   |   1st Quadrant    *
*                   |                   *
*-------------------|-------------------*
*                   |                   *
*    3rd Quadrant   |   2nd Quadrant    *
 *          _       |                  *
 **       |\        |         /       **
  **        \       |       |/_      **
    *               |               *
     **             |             **
       **           |           **
          ***       |       ***
               ***********
1

Here you go.

var canvas = document.getElementById('circle');
var ctx = canvas.getContext('2d');

var x = 250,
y = 250,
radius = 200,
// 0deg   - 1.5 * Pi,
// 90deg  - 0   * Pi, 
// 180deg - 0.5 * Pi, 
// 270deg - 1   * Pi
angleStart = 1.5 * Math.PI,
angleEnd = 0.7 * Math.PI;

//Create gradient
var gradient = ctx.createLinearGradient(0,500,0, 0);
gradient.addColorStop(0, '#000');
gradient.addColorStop(1, '#40d6a5');


//Draw circle
ctx.beginPath();
ctx.arc(x, x, radius, 0, 2*Math.PI, false);
ctx.lineWidth = 30;
ctx.strokeStyle = 'rgba(255,255,255, 0.2)'
ctx.stroke();

//Draw arc
ctx.beginPath();
ctx.arc(x, y, radius, angleStart, angleEnd);
ctx.strokeStyle = gradient;
ctx.lineWidth = 30;
ctx.lineCap = 'round';
ctx.stroke();

Not my code, I found it on the link below.

http://codepen.io/alsheuski/pen/eJNwNX

Or this one

http://jsfiddle.net/simonsarris/Msdkv/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.