HTML Canvas: Fill() not working with no errors in console

Question

Hello I am making a polygon and want to fill it up. But whatever I try to do I can't seem to make it work.

If anyone can point me in the right direction I appreciate it.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
op = {
  "pts": [{
    "x": 40,
    "y": 13.5
  }, {
    "x": 60,
    "y": 27.75
  }, {
    "x": 60,
    "y": 56.25
  }, {
    "x": 40,
    "y": 70.5
  }, {
    "x": 20,
    "y": 56.25
  }, {
    "x": 20,
    "y": 27.75
  }],
  "color": "#00F",
  "fillcolor": "#FF0000",
  "lineWidth": 1
};

ctx.save();
ctx.strokeStyle = op.color;
ctx.fillStyle = op.fillcolor;
ctx.lineWidth = op.lineWidth;
ctx.beginPath();

for (i = 1; i <= op.pts.length; i++) {
  if (i == op.pts.length) {
    ctx.moveTo(op.pts[i - 1].x, op.pts[i - 1].y);
    ctx.lineTo(op.pts[0].x, op.pts[0].y);
  } else {
    ctx.moveTo(op.pts[i - 1].x, op.pts[i - 1].y);
    ctx.lineTo(op.pts[i].x, op.pts[i].y);
  }
}

ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

ADuboisForge · Accepted Answer · 2019-02-12 23:39:41Z

1

You only need to use moveTo() once for each path after beginPath() then just use lineTo() after that. Once you do all of the lineTo()'s in the for loop, then you can do the ctx.fill() to get it to work.

Here's the updated part of the code:


/* set moveTo() once before for loop */
ctx.moveTo(op.pts[0].x,op.pts[0].y);



/*then in the for loop just use lineTo(), using lineTo() will keep track of the last endpoint on the current path so you don't need to use moveTo() unless you are starting a new path.*/

        for (i=1;i<=op.pts.length;i++) {
            if (i==op.pts.length) {
                ctx.lineTo(op.pts[0].x,op.pts[0].y);
            } else {
                ctx.lineTo(op.pts[i].x,op.pts[i].y);
            }
        }

/* now the following will work */
    ctx.closePath();
    ctx.fill();

Hope this helps!

edited Feb 12, 2019 at 23:39

answered Feb 12, 2019 at 23:26

ADuboisForge

1216 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Remy Houard Over a year ago

It does! Thank you. If I set the i in the for to 0 instead of 1 it works without the move to before the loop. Is that a bad practice or does it work? If its ok the if is no longer needed. The loop then becomes: for (i=0;i<op.pts.length;i++) { ctx.lineTo(op.pts[i].x,op.pts[i].y); }

ADuboisForge Over a year ago

So according to MDN's canvas tutorial: developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/…, you don't have to use moveTo() after beginPath() per se, this is just used to move the coordinates, it's not required. Also using fill() automatically closes the path but stroke() does not, so you can call stroke() first, and then fill(), and leave out the closePath() and it will have the same result with one less line of code

Collectives™ on Stack Overflow

HTML Canvas: Fill() not working with no errors in console

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related