HTML5 Canvas: How to border a fillRect?

Question

In HTML5, I want to make a fillRect() (with a white fill color) and a border (black). I don\'t want to use strokeRect() unless I can f

Answer 1

you can not fill it later without a library. If you want to change something simply redraw. You can use something like that:

ctx.fillStyle = 'blue';
ctx.strokeStyle = 'red';
var fillRect = false;
ctx.rect(20, 20, 150, 100);
if (fillRect) {
  ctx.fill();
}
ctx.stroke();

it will draw only the border, if you change fillRect to true it will be filled. You can update your canvas on every requestAnimationFrame.

But maybe you want to use a library like paper.js. It makes things like clicking on objects much easier and it abstracts draws on canvas to objects you create once and update later, like what you asked for.