Pourquoi canvas.arc ne fonctionne pas?

Question

Je le code à la fin d'une page web:

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

Mais rien ne montre. Je sais que le problème est avec la fonction d'arc, car ctx.fillRect(0, 0, 100, 100); fonctionne très bien.

Toute idée de ce que je fais mal?

(Oui, j'ai JQuery)

Answer 1

Vous devez utiliser ctx.beginPath () avant ctx.arc () et ctx.stroke () après, cela indique la toile pour nettoyer son tampon avant qu'il commence à dessiner, et le tampon de sortie sur la toile une fois terminée. fillRect () / strokeRect () gère déjà les commencent / tâches de fin pour vous.

Answer 2

Vous devez faire un chemin:

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