Estoy tratando de dibujar una pelota y un círculo alrededor de ella. No sé por qué aparece una línea en el lado derecho de la pelota. Estoy usando .fill para hacer la bola y .stroke para hacer el círculo.
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>Como ha usado ctx.beginPath(); . Lo mismo se debe usar para rtx también, la línea blanca que se muestra es porque no ha usado rtx.beginPath(); dentro del bloque if que contiene rtx. Así que simplemente agregue rtx.beginPath(); una línea antes de 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>