How to draw circles in HTML5 canvas with text in them

Question

It seems fairly simple to draw circles and text in an HTML5 canvas, but I get an unintuitive behavior. Circles are drawn beautifully and beautifully, then the more circles are drawn, circles older become more and more octagonal. Very strange for me ... In addition, the text disappears from the old circles and appears only on the last circle. What is the right way to do this with canvases?

$("#circles_container").on("click", "#circles_canvas", function(event) { var canvas = document.getElementById('circles_canvas'); if (canvas.getContext) { var ctx = canvas.getContext("2d"); var w = 16; var x = event.pageX; var y = Math.floor(event.pageY-$(this).offset().top); ctx.fillStyle = "rgb(200,0,0)"; ctx.arc(x, y, w/2, 0, 2 * Math.PI, false); ctx.fill(); ctx = canvas.getContext("2d"); ctx.font = '8pt Calibri'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.fillText('0', x, y+3); } }); 

Answer 1

Just add this at the beginning of your function:

  ctx.beginPath(); 

You have drawn the path always longer.

Demo (click on canvas)