Круговой чертеж не очищается при 90 градусах

Question

Я хочу переместить красный круг на орбиту с 360 градусами.

Но при 90 градусах круг не очищается.

код здесь: https://jsfiddle.net/Laqd0L36/3/

var i=0; 

function Rotate(ctx){ 
    i++;   
    if(i==360){        
     i=0; 
    } 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
//Radius of orbit * i(degree) * convert to radian 
    x = 140*Math.cos(i*Math.PI/180); 
    y = 140*Math.sin(i*Math.PI/180); 
    Circle(ctx,x,y); 
    } 

function Circle(ctx,x,y){ 
    ctx.fillStyle = 'rgb(255,35,55)'; 
    ctx.beginPath(); 
    ctx.arc(x,y,12,0,Math.PI*2,true); 
    ctx.fill(); 
    ctx.closePath(); 
    } 

function CtxInterval(){ 
    var can = document.getElementById("can"); 
    var ctx = can.getContext("2d"); 
    ctx.translate(150,150); 
    setInterval(function(){Rotate(ctx);},10); 
} 
CtxInterval(); 

Answer 1

Как вы переводите свой контекст 150, 150, вам нужно, чтобы начать свой clearRect прямоугольник -150, -150. (Вот ваш updated fiddle)

@ комментарий Теему является более элегантное решение, хотя есть

Удалить ctx.translate(150, 150), и добавить 150 х и у в arc()

var i=0; 

function Rotate(ctx){ 
    i++;   
    if(i==360){        
     i=0; 
    } 
    console.log("width: "+ctx.canvas.width+ "height: "+ctx.canvas.height); 
    ctx.clearRect(-150,-150,ctx.canvas.width,ctx.canvas.height); 

//Radius of orbit * i(degree) * convert to radian 
    x = 140*Math.cos(i*Math.PI/180); 
    y = 140*Math.sin(i*Math.PI/180); 
    Circle(ctx,x,y); 
    } 

function Circle(ctx,x,y){ 
    ctx.fillStyle = 'rgb(255,35,55)'; 
    ctx.beginPath(); 
    ctx.arc(x,y,12,0,Math.PI*2,true); 
    ctx.fill(); 
    ctx.closePath(); 
    } 

function CtxInterval(){ 
    var can = document.getElementById("can"); 
    var ctx = can.getContext("2d"); 
    ctx.translate(150,150); 
    setInterval(function(){Rotate(ctx);},10); 
} 
CtxInterval();