Clear HTML canvas [duplicate]

Question

I want an HTML canvas that displays mouse position on its JS grid on mouse move, but I can't seem to clear my canvas, I tried using ctx.clearRect(0,0 canvas.width, canvas.height) and clearing with a click, but it somehow remembers the previous draw it had. I want only one black square to be displayed on canvas at a time depending on the mouse position. Heres demo on code pen and some code

<canvas id="myMap" style="width: 300px;height: 300px;background-color: beige;"></canvas>
<script>
  var findDivisible = (x, scale) => {
    while (x % scale !== 0 && x > 0) {
      x = x - 1;
    };
    return x
  };

  var map = document.getElementById("myMap");
  map.width = 300;
  map.height = 300;
  var mapContext = document.getElementById("myMap").getContext("2d");
  map.addEventListener("mousemove", function(e) {
    mapContext.clearRect(0, 0, map.width, map.height);
    mapContext.rect(findDivisible(e.clientX - map.offsetLeft, 50), findDivisible(e.pageY - map.offsetTop, 50), 50, 50);
    mapContext.stroke();

  });
  map.addEventListener("click", function() {
    mapContext.clearRect(0, 0, 500, 500);
  })
</script>

AKX · Accepted Answer · 2019-05-07 14:05:50Z

2

You're not starting a new stroke for each rectangle, but "piling them up" so they get re-re-redrawn with .stroke().

Use .beginPath():

function findDivisible(x, scale) {
  while (x % scale !== 0 && x > 0) {
    x = x - 1;
  }
  return x;
}

var map = document.getElementById("myMap");
map.width = 300;
map.height = 300;
var mapContext = map.getContext("2d");
map.addEventListener("mousemove", function(e) {
  mapContext.clearRect(0, 0, map.width, map.height);
  mapContext.beginPath();
  mapContext.rect(
    findDivisible(e.clientX - map.offsetLeft, 50),
    findDivisible(e.pageY - map.offsetTop, 50),
    50,
    50,
  );
  mapContext.stroke();
});
map.addEventListener("click", function() {
  mapContext.clearRect(0, 0, 500, 500);
});

<canvas id="myMap" style="width: 300px;height: 300px;background-color: beige;"></canvas>

answered May 7, 2019 at 14:05

AKX

171k16 gold badges147 silver badges229 bronze badges

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

Comments

ontimond · Accepted Answer · 2019-05-07 14:20:49Z

1

You can try this:

map.addEventListener("mousemove", function(e){              
  map.width = map.width;
  mapContext.rect(findDivisible(e.clientX-map.offsetLeft,50) , findDivisible(e.pageY - map.offsetTop,50), 50, 50);
  mapContext.stroke();              
});

map.addEventListener("click", function(){
  map.width = map.width;
});

One of the ways that is implicitly endorsed in the spec and often used in people’s apps to clear a canvas https://dzone.com/articles/how-you-clear-your-html5

edited May 7, 2019 at 14:20

answered May 7, 2019 at 14:05

ontimond

3961 gold badge3 silver badges6 bronze badges

2 Comments

DBS Over a year ago

If ctx.clearRect doesn't work, it's unlikely an old method of doing the same thing (re-setting the width) will make any difference.

Kaiido Over a year ago

@DBS and still, that would. This does reset the whole context, including the current sub-path declaration along with all the context's settable options, and its underlying ImageData (i.e a lot of garbage to collect). That's why one should never use this hack.

Collectives™ on Stack Overflow

Clear HTML canvas [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related