CODEWITHSUNDEEP
javascriptfabricjs
shekhar kumar
shekhar kumar

Reputation: 91

Gradient with angle using fabric.js

https://angrytools.com/gradient/image/

How to achieve gradient angle using fabric.js

enter image description here

Upvotes: 1

Views: 1197

Answers (1)

Adam M.
Adam M.

Reputation: 1088

This is the whole documentation related to the Gradient. There is actually no easy, official way to specify an angle. You can write your own angle function by manipulating 4 coordinates of the gradient

var canvas = new fabric.Canvas("canvas");

var rect = new fabric.Rect({
  left: 50,
  top: 50,
  width: 200,
  height: 200
});

rect.setGradient('fill', {
  type: 'linear',
  // You mainly need to apply a logic to these 4 values
  x1: 0,
  y1: rect.height / 2,
  x2: rect.width,
  y2: rect.height / 2,
  colorStops: {
    0: "white",
    0.5: "0f3c78",
    1: "0f3c78"
  }
});

canvas.add(rect);
canvas.renderAll();

Anyway there is an old discussion to make it as a possible feature of the framework https://github.com/fabricjs/fabric.js/issues/888, there is also a good Fiddle that demonstrates how to achieve it https://jsfiddle.net/r043v/Z7Zg7/.

Upvotes: 3

Related Questions