Odd artifacts showing up in Javascript element-CodePudding

I have two buttons in an html page moving a line around a circle, I want there to always only be one line but when the buttons are pressed enough for the line to be on the bottom half of the circle moving clockwise extra lines appear the actual words are the buttons because I am using icons for the buttons on the actual page, setting it as a button made for more editing.

since I was told I have too much code I removed the 3 lines of css there was so even though the words dont change color or anything on the page they still can be clicked to move the arm

var pos = 0; //global variable
var inc = 0.1;
function clockwise() {
  pos -= inc;
  drawCircle();
}
function counter() {
  pos  = inc;
  drawCircle();
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;
setInterval(drawCircle, 0);
function drawCircle() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
  drawHand(ctx, pos, radius * 0.9, radius * 0.02);
}
function drawHand(ctx, pos, length, width) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0, 0);
  ctx.rotate(pos);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.rotate(-pos);
}

<p><b1 id="left" onclick="clockwise()">counter-clockwise</b1></p>                 
<p><b3 id="right" onclick="counter()">clockwise</b3></p>
<canvas id="canvas" width="240" height="240" style="background-color:transparent"></canvas>

CodePudding user response：

The arc drawing is also a path.

Change this:

function drawCircle() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
  drawHand(ctx, pos, radius * 0.9, radius * 0.02);
}

To this:

function drawCircle() {
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
  drawHand(ctx, pos, radius * 0.9, radius * 0.02);
}

As @Mike'Pomax'Kamermans said, you should also clear the drawing area everytime before starting to draw a new frame. You can also save the context state before rotating it and after you do what you want, restore the previous state. Doing so, you will not need to rotate back the same amount of radians. I changed your increment to degrees too. I rewrote your code, take a look:

var pos = 0;
var inc = 30;

function clockwise() {
  pos -= inc * Math.PI / 180.0;
}

function counter() {
  pos  = inc * Math.PI / 180.0;
}

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;

setInterval(drawCircle, 0);

function drawCircle() {

  ctx.clearRect( -radius-10, -radius-10, radius*2 10, radius*2 10 );

  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();

  drawHand(pos, radius * 0.9, radius * 0.02);

}

function drawHand(pos, length, width) {

  ctx.save();
  ctx.rotate(pos);

  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -length);
  ctx.stroke();

  ctx.restore();

}

<!DOCTYPE html>
<html>
  <body style="background-color: #009688">
    <canvas
      id="canvas"
      width="240"
      height="240"
      style="background-color: transparent"
    ></canvas>
    <p><button id="left" onclick="clockwise()">counter-clockwise</button></p>
    <p><button id="right" onclick="counter()">clockwise</button></p>
  </body>
</html>