How to identify the objects color on fabricjs

Question

I have a canvas (with fabricjs working on) where I put rectangles of different colors but with the 50% opacity of the fill color by default.

At the end, I want to set the opacity of every rectangle selected to 100% with the respective color. I'm having difficulties identifying the color of every rectangle, so I can pass from "rgba(255,0,0,0.5)" to "rgba(255,0,0,1)", and from "rgba(0,255,0,0.5)" to "rgba(0,255,0,1)" (for example).

This is the code right now:

function fillColor() {
  var objs = canvas.getActiveObjects();
  if (!objs) return;

  objs.forEach(function (obj) {
    if (obj instanceof fabric.Path) {
      obj.setStroke('rgba(242,0,222,1)');
    } else {
      obj.set("fill", 'rgba(242,0,222,1)');
    }
    canvas.renderAll();
  });
}

This only converts every selected object to a 'rgba(242,0,222,1)'.

And I wanted to be like:

function fillColorOb() {
  var objs = canvas.getActiveObjects();
  if (!objs) return;

  objs.forEach(function (obj) {
    if (obj instanceof fabric.Path) {
      obj.setStroke('rgba(242,0,222,1)');
    } else {
      //if (obj.color == 'rgba(242,0,222,0.5)') {
        //obj.set("fill", 'rgba(242,0,222,1)');
      //}
      //if (obj.color == 'rgba(242,0,0,0.5)') {
        //obj.set("fill", 'rgba(242,0,0,1)');
      //}
    }
    canvas.renderAll();
  });
}

So that way, with the if I can identify first the rectangle color and then set the rgba as I want.

Thanks:)

Answer 1

I didn't come up with the exact idea, but here is a solution:

I have struggle trying to extract information from an object selected, but there is a thing you can do. You can export all the canvas into a JSON file:

  JSON.stringify(canvas);

And then interpret that JSON file

    {
    "version": "5.2.4",
    "objects": [{
        "type": "rect",
        "version": "5.2.4",
        "originX": "left",
        "originY": "top",
        "left": 318,
        "top": 13,
        "width": 100,
        "height": 100,
        "fill": "rgba(242,0,222,0.5)",
        "stroke": "rgba(242,0,222,1)",
        "strokeWidth": 2,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "rx": 10,
        "ry": 10,
        "name": "ly1"
    }, {
        "type": "circle",
        "version": "5.2.4",
        "originX": "left",
        "originY": "top",
        "left": 114,
        "top": 119,
        "width": 253.49,
        "height": 253.49,
        "fill": "rgba(0,255,132,0.5)",
        "stroke": "rgba(0,255,132,1)",
        "strokeWidth": 2,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "radius": 126.74605507255723,
        "startAngle": 0,
        "endAngle": 360,
        "name": "ly4"
    }]
}

And then all the information you'll need you can find it on that file.

That's not what I was exactly expecting but it works, and I had to export it anyways so :)

Hope it helped anyone!