JavaScript circular line

I want to make a circle line, but it makes a black box. What am I missing?

here is my jsfiddle: http://jsfiddle.net/j6y5f7xb/1/

My code is:

var x = 0;

var maxLoops = 800;
var counter = 0;

function loop(){
    if (counter++ >= maxLoops) return;

    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");

    ctx.clearRect(0, 0, 800, 500);

    ctx.moveTo(400,250);
    ctx.lineTo(x,100);
    ctx.stroke();

    x++;

    setTimeout(function(){
        console.log(counter);
        loop();
    }, 10);
}
loop();
+4
source share
3 answers

try adding it like this: ctx.beginPath ();
            ctx.moveTo (400250); ctx.lineTo (x, 100); ctx.stroke ();

+2
source

Try adding this line under ctx.lineTo ().

  context.fillStyle = 'black';
  context.fill();

For more information, you can check this site: http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

+1
source

A '' , this?

, y 100

+1
source

Source: https://habr.com/ru/post/1619475/


All Articles