Why is canvas.arc not working?

Question

I have this code at the end of a web page:

var canvas = document.getElementByID("canvas");
var ctx = canvas.getContext("2d");
canvas.style.width = $(window).width();
canvas.style.height = $(window).height();
ctx.arc(50, 50, 50, 0, Math.PI * 2, false);
$(window).resize(function () { 
  canvas.style.width = $(window).width();
  canvas.style.height = $(window).height();
  console.log("resize");
});

But nothing shows up. I know that the problem is with the arc function because ctx.fillRect(0, 0, 100, 100); works fine.

Any idea what I am doing wrong?

(Yes, I do have JQuery)

Knell

Answer 1

You need to use ctx.beginPath() before ctx.arc() and ctx.stroke() afterwards, this tells canvas to clean its buffer before it starts drawing, and to output buffer to the canvas after it finishes. fillRect()/strokeRect() already handles those begin/end tasks for you.

Cosmetic

Answer 2

You need to do a path:

var canvas = document.getElementByID("canvas");
var ctx = canvas.getContext("2d");
canvas.style.width = $(window).width();
canvas.style.height = $(window).height();

ctx.beginPath(); // <-- start a path

ctx.arc(50, 50, 50, 0, Math.PI * 2, false); // <-- add the arc to the path

ctx.strokeStyle = "#000000"; // <-- set fill color
ctx.stroke(); // <-- draw the arc

$(window).resize(function () { 
  canvas.style.width = $(window).width();
  canvas.style.height = $(window).height();
  console.log("resize");
});

Iggie

Answer 3

1. First of all ID in first line needs to be Id.
2. Then for the arc function there needs to be a ctx.beginPath(); function to start.
3. after that give it a colour eg. ctx.fillStyle = "Colour You Want";
4. then, your arc function ctx.arc(50, 50, 50, 0, Math.PI * 2, false); as it is
5. and after that at the end put ctx.fill(); to complete the process.

Centillion