I was looking at this code and added ctx.fillStyle = 'red', and got this. I click on eBooks to hide its data but instead of eBooks being red, Microforms and Audiovisuals Mats were changed to red.

var fillText = function(x, y, legendItem, textWidth) 
{
    ctx.fillText(legendItem.text, boxWidth + (fontSize / 2) + x, y);

    if (legendItem.hidden) {
        // Strikethrough the text if hidden
        //ctx.beginPath();
        //ctx.lineWidth = 2;
        //ctx.moveTo(boxWidth + (fontSize / 2) + x, y + (fontSize / 2));                                                
        //ctx.lineTo(boxWidth + (fontSize / 2) + x + textWidth, y + (fontSize / 2));
        //ctx.stroke();
        ctx.fillStyle = 'red'; //added here                                                
    }                                
};

I was looking at this code and added ctx.fillStyle = 'red', and got this. I click on eBooks to hide its data but instead of eBooks being red, Microforms and Audiovisuals Mats were changed to red.

var fillText = function(x, y, legendItem, textWidth) 
{
    ctx.fillText(legendItem.text, boxWidth + (fontSize / 2) + x, y);

    if (legendItem.hidden) {
        // Strikethrough the text if hidden
        //ctx.beginPath();
        //ctx.lineWidth = 2;
        //ctx.moveTo(boxWidth + (fontSize / 2) + x, y + (fontSize / 2));                                                
        //ctx.lineTo(boxWidth + (fontSize / 2) + x + textWidth, y + (fontSize / 2));
        //ctx.stroke();
        ctx.fillStyle = 'red'; //added here                                                
    }                                
};

• javascript
• chart.js

Share Improve this question Follow edited Jul 24, 2018 at 13:53 SedJ601 asked Jun 21, 2016 at 15:46 SedJ601SedJ601 13.8k33 gold badges4242 silver badges6363 bronze badges 2

• Could you add your full code which reproduces the error, either by editing your question or adding a link to jsFiddle for isntance. From what you currently have, we don't know how and where fillText() is called and then can't help you. – tektiv Commented Sep 1, 2016 at 12:36
• I didn't do anything special in my code. The code you are looking at is in charts.js which can be found online. I made these changes within charts.js to get this result. – SedJ601 Commented Sep 1, 2016 at 20:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +50

If you take a look at the fillStyle doc on MDN :

The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color or style to use inside shapes.

So it will have an effect on the next shapes (such as text via fillText).

---

You need to change the style of the text before writing it down.

Using the same function you put in your question :

var fillText = function(x, y, legendItem, textWidth) 
{
    // We store the current fillStyle
    var prevFillStyle = ctx.fillStyle;

    if (legendItem.hidden) {
        // If the item is hidden, we change the fillStyle to red
        ctx.fillStyle = "red";
    }

    // The legend label is written here
    ctx.fillText(legendItem.text, boxWidth + (fontSize / 2) + x, y);

    if (legendItem.hidden) {
        // We ment the stroke part -- as you did
        //ctx.beginPath();
        //ctx.lineWidth = 2;
        //ctx.moveTo(boxWidth + (fontSize / 2) + x, y + (fontSize / 2));
        //ctx.lineTo(boxWidth + (fontSize / 2) + x + textWidth, y + (fontSize / 2));
        //ctx.stroke();

        // And then we put the fillStyle back to its previous value
        ctx.fillStyle = prevFillStyle;                                              
    }                                
};

And here is the final result :

I found a better way doing that:

add onClick to legends and put this :

      const index = legendItem.datasetIndex;
      const ci = legend.chart;
      const isVisible = ci.isDatasetVisible(index);
      ci.setDatasetVisibility(index, !isVisible);
   

      // this is where the stroke remove happens
      const ci = legend.chart;

      const fillTextValue = ci.ctx.fillText;
      ci.ctx.fillText = function fillText(x, v, b) {
        fillTextValue.bind(ci.ctx, x, v, b)();
        this.fillStyle = "rgba(0,0,0,0)"; // whatever color you like
      };
      ci.update();