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>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>