CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
phoenix
phoenix

Reputation: 391

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.

Upvotes: 1

Views: 77

Answers (1)

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 1

Related Questions