Pourquoi canvas.arc ne fonctionne pas?

Question

Je possède ce 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 parce que ctx.fillRect(0, 0, 100, 100); fonctionne très bien.

Une 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 ne commence à dessiner et pour afficher le tampon sur le canevas après la fin. fillRect()/strokeRect() gère déjà ces tâches début/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"); 
});