Warum funktioniert Canvas.ARC nicht?

Question

Ich habe diesen Code am Ende einer Webseite:

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");
});

Aber nichts taucht auf. Ich weiß, dass das Problem mit der ARC -Funktion liegt, weil ctx.fillRect(0, 0, 100, 100); funktioniert gut.

Irgendeine Idee, was ich falsch mache?

(Ja, ich habe jQuery)

Answer 1

Sie müssen ctx.beginPath () verwenden, bevor ctx.arc () und ctx.stroke () danach angewiesen werden, dass Canvas vor dem Zeichnen sein Puffer reinigen soll, und nach Abschluss der Leinwand auf die Leinwand auszugeben. FillRect ()/Strokerect () erledigt diese Beginn/Endaufgaben für Sie bereits.

Answer 2

Sie müssen einen Weg machen:

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");
});