Canvas arc clearing

Question

How do I overwrite an HTML5 canvas arc? I presumed this code would work but it leaves a border around it despite the fact that its exactly the same values and just a different colour.. Is there a border property I'm missing??

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
  <canvas id="surface" width="300" height="300"></canvas>

  <script type="text/javascript">
      var canvas = document.getElementById('surface');
      var ctx = canvas.getContext('2d');

      ctx.fillStyle = 'black';
      ctx.beginPath();
      ctx.arc(100, 100, 20, 0, Math.PI * 2, true);
      ctx.fill();

      ctx.fillStyle = 'white';
      ctx.beginPath();
      ctx.arc(100, 100, 20, 0, Math.PI * 2, true);
      ctx.fill();
  </script>
  </body>
</html>

Just out of curiosity, is this faster than using ctx.clear()? — Alexander Tsepkov, Jun 11 '11 at 22:48
Not really, I ended up restructuring the format with which I rendered using the standard update/draw cycle. As a part of the draw I used ctx.clear() and that worked much faster. — Alex Latchford, Jul 08 '11 at 14:17
[`ctx.imageSmoothingEnabled= false;`](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) — ashleedawg, Dec 22 '21 at 09:29

score 3 · Answer 1 · answered Oct 11 '11 at 21:37

3

for this situation, it makes more sense to just redraw the the portion of the canvas that contained the arc. You can clear a section of the canvas with

ctx.clearRect(x, y, width, height);

or for simplicity you could just clear the entire canvas and redraw it completely:

ctx.clearRect(0, 0, canvas.width, canvas.height);

answered Oct 11 '11 at 21:37

Eric Rowell

5,191
23
22

Actually it doesn't, because I had a number of balls on each frame I was clearing and drawing multiple times. Now I just clear once and redraw multiple. Although the area I clear is larger the benefit you get from removing the calculations outweighs this and it's actually a load faster. – Alex Latchford Oct 17 '11 at 09:13
1

Fair enough, as I mentioned, in that case you should go ahead and clear the whole canvas with ctx.clearRect(0, 0, canvas.width, canvas.height). You might also consider using layering, and have a canvas element for each ball on the screen. In this way, you only have to clear and redraw one ball at a time, and not the entire scene. – Eric Rowell Oct 17 '11 at 19:57

score 2 · Accepted Answer · answered May 30 '11 at 10:23

2

This black edge is a side affect of anti-aliasing.

The easiest solution is to increase the radius of the arc slightly.

answered May 30 '11 at 10:23

Twelve47

3,924
3
22
29

Hmm, is there no flag I can set to turn it off? – Alex Latchford May 30 '11 at 10:25
Actually see this: http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element – Alex Latchford May 30 '11 at 10:27
Apparently not http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element Unless you right your own arc function to draw individual pixels – Twelve47 May 30 '11 at 10:27
[`ctx.imageSmoothingEnabled= false;`](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) – ashleedawg Dec 22 '21 at 09:29

score 1 · Answer 3 · answered May 30 '11 at 10:26

1

In case you want something like undo feature you could copy the image data to a swap canvas before the arc drawing. Then copy the image data from swap canvas to the visible one if the undo is required.

answered May 30 '11 at 10:26

Petteri H

11,779
12
64
94

I am doing a simple ball collision problem, thought it would be easier to overwrite each ball as it moves but hit this problem.. I don't think I'll need anything more complicated but thanks anyway :) – Alex Latchford May 30 '11 at 10:30
1

Ah, I see. Then you'd better to redraw the whole scene for each frame. Check some JS & Canvas game tutorials for examples. – Petteri H May 30 '11 at 10:36

Canvas arc clearing

3 Answers3

Linked