phoenix phoenix - 1 month ago 9
HTML Question

Javascript context.closePath() method does not appear

I have tried a lot to draw multiple circles in canvas but

context.closePath()
method does not appear

I have this code :

<script>
var canvas = document.getElementById('mainCanvas-2');
var context = canvas.getContext('2d');
for(var i=0;i<canvas.width;i++){
var centerX = i+Math.random()*canvas.width / 2;
var centerY = i+Math.random()*canvas.height / 2;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.shadowColor = 'white';
context.shadowBlur = 45;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.fillStyle = 'rgba(255, 255, 255, 0.5)';
context.fill();
context.strokeStyle = none;
context.stroke();
context.// here closePath() method does not appear
}
</script>


any help please,and thanks.

Answer

Changing context.strokeStyle = none to context.strokeStyle = 'none' solves it, cheers!

Demo below:

  var canvas = document.getElementById('mainCanvas-2');
  var context = canvas.getContext('2d');
  for(var i=0;i<canvas.width;i++){    
      var centerX = i+Math.random()*canvas.width / 2;
      var centerY = i+Math.random()*canvas.height / 2;
      var radius = 20;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.shadowColor = 'white';
      context.shadowBlur = 45;
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 0;
      context.fillStyle = 'rgba(255, 255, 255, 0.5)';
      context.fill();
      context.strokeStyle = 'none';
      context.stroke();
      context.closePath();
  }
<canvas id = "mainCanvas-2"></canvas>