Невозможно изменить размер Canvas Item

Question

Я пытаюсь изменить размер элемента canvas.

 var canvas = document.getElementById('timer'), 
 
      ctx = canvas.getContext('2d'), 
 
      sec = this.length, 
 
      countdown = sec; 
 

 
     ctx.lineWidth = 10; 
 
     ctx.strokeStyle = "#F60017"; 
 
     ctx.strokeStyle = "#000000"; 
 

 
     var startAngle = 0, 
 
      time = 0, 
 
      intv = setInterval(function() { 
 

 
       ctx.clearRect(0, 0, 200, 200); 
 
       var endAngle = (Math.PI * time * 2/sec); 
 
       ctx.arc(65, 35, 30, startAngle, endAngle, false); 
 
       startAngle = endAngle; 
 
       ctx.stroke(); 
 

 
       countdown--; 
 

 
       if (++time > sec, countdown == 0) { 
 
        clearInterval(intv), $("#timer, #counter").show(); 
 
       } 
 

 

 
      }, 10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas id="timer"></canvas>

Если изменить ctx.clearRect(0, 0, 200, 200); он все еще остается 200x200

Answer 1

clearRect() используется для удаления предыдущего рисунка, прежде чем новый один рисуется. Я добавил новые переменные: x, y и size. Наряду с ctx.lineWidth этого должно быть достаточно, чтобы изменить внешний вид.

var canvas = document.getElementById('timer'), 
 
    ctx = canvas.getContext('2d'), 
 
    sec = 100, 
 
    countdown = sec; 
 

 
var x = 60, 
 
    y = 60 
 
    size = 30; // change me 
 
ctx.lineWidth = 25; 
 
ctx.strokeStyle = "#F60017"; 
 
ctx.strokeStyle = "#000000"; 
 

 
var startAngle = 0, 
 
    time = 0, 
 
    intv = setInterval(function() { 
 
     console.log('interval'); 
 

 
     ctx.clearRect(0, 0, 200, 200); 
 
     var endAngle = (Math.PI * time * 2/sec); 
 
     ctx.arc(x, y, size, startAngle, endAngle, false); 
 
     startAngle = endAngle; 
 
     ctx.stroke(); 
 

 
     countdown--; 
 

 
     if (++time > sec && countdown <0) { 
 
     clearInterval(intv), $("#timer, #counter").show(); 
 
     } 
 

 

 
    }, 10);

<canvas id="timer"></canvas>