CODEWITHSUNDEEP
javascripthtmlcanvas
Niquimi
Niquimi

Reputation: 5

HTML JS Circle Drawing Line

I'm trying to draw a ball and a circle around it. I don't know why a line appears in the right side of the ball. I'm using .fill to make the ball and .stroke to make the circle.

function draw() {
  var canvas = document.getElementById('circle');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var X = canvas.width / 2;
    var Y = canvas.height / 2;
    var R = 45;

    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    ctx.lineWidth = 3;
    ctx.fillStyle = "white";
    ctx.fill();
  }
  if (canvas.getContext) {
    var rtx = canvas.getContext('2d');
    var A = canvas.width / 2;
    var B = canvas.width / 2;
    var Ra = 90;

    rtx.arc(A, B, Ra, 0, 2 * Math.PI, false);
    rtx.lineWidth = 2;
    rtx.strokeStyle = "white";
    rtx.stroke();
  }
}
body {
  background-color: rgb(8, 8, 22);
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<body onload="draw()">
  <canvas id="circle" width="1000" height="1000">

    </canvas>
</body>

Upvotes: 0

Views: 69

Answers (1)

Techbrid Sarvesh
Techbrid Sarvesh

Reputation: 11

As you have used ctx.beginPath(); . The same is to be used for rtx also, the white line which is being showed is because you have not used rtx.beginPath(); inside the if block which contains rtx. So just add rtx.beginPath(); one line before rtx.arc(A, B, Ra, 0, 2 * Math.PI, false);

function draw() {
  var canvas = document.getElementById('circle');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var X = canvas.width / 2;
    var Y = canvas.height / 2;
    var R = 45;

    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    ctx.lineWidth = 3;
    ctx.fillStyle = "white";
    ctx.fill();
  }
  if (canvas.getContext) {
    var rtx = canvas.getContext('2d');
    var A = canvas.width / 2;
    var B = canvas.width / 2;
    var Ra = 90;

    rtx.beginPath(); //the line to be added
    rtx.arc(A, B, Ra, 0, 2 * Math.PI, false);
    rtx.lineWidth = 2;
    rtx.strokeStyle = "white";
    rtx.stroke();
  }
}
body {
  background-color: rgb(8, 8, 22);
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<body onload="draw()">
  <canvas id="circle" width="1000" height="1000">

    </canvas>
</body>

Upvotes: 1

Related Questions