CODEWITHSUNDEEP
htmlcanvashtml5-canvas
Karthik
Karthik

Reputation: 701

Circle not showing while using Canvas

This is the code from a course in Udemy. I did not understand why circle is not showing up for me. The same code when used by the instructor produces a circle.

Rectangle works fine for me.

var canvas, canvasContext;
console.log("text from script");
window.onload = function() {
  canvas = document.getElementById('gameCanvas');
  canvasContext = canvas.getContext('2d');

  canvasContext.fillStyle = "red";
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);

  // cavasContext.fillStyle="white";
  // canvasContext.beginPath();
  // canvasContext.arc(100,100,10,0,Math.PI*2,true);

  cavasContext.beginPath();
  cavasContext.arc(100, 75, 50, 0, 2 * Math.PI);
  cavasContext.stroke();
}
<canvas id="gameCanvas" width="800" height="600"></canvas>

Upvotes: 0

Views: 91

Answers (1)

Dwadelfri
Dwadelfri

Reputation: 464

There is a typo, you've spelled canvasContext wrong, missed a "n".

cavasContext.beginPath();
cavasContext.arc(100,75,50,0,2*Math.PI);
cavasContext.stroke();

Should probably be:

canvasContext.beginPath();
canvasContext.arc(100,75,50,0,2*Math.PI);
canvasContext.stroke();

Upvotes: 1

Related Questions