Canvas zeichnet in einer Umgebung, nicht in der anderen

Question

Ich versuche, ein Eingabeformular zu erstellen, das Informationen verwendet, um eine einfache Form mit Zeichenfläche zu zeichnen.

Ich hatte es in der Codecademy Testumgebung arbeiten, aber ich konnte nicht herausfinden, wie die Konsole zu bringen, also versuchte ich, es zu codepen.io zu migrieren, so dass ich einige Ausgaben für die Fehlerbehebung bei Bedarf erhalten konnte. Nach dem Kopieren zeichnet es nicht mehr die Form. Gibt es etwas, das mir fehlt?

Hier ist das Skript, das ich verwende. Ich habe versucht, es Zeile für Zeile zu kommentieren, aber ohne Erfolg. Ich habe auch versucht, jsfiddle mit dem gleichen Ergebnis zu verwenden.

$(document).ready(function(){ 
    //Initialize canvas 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 

    //Draw settings 

    //draw circle! 
    function draw() { 
     var x = document.getElementById('x').value 
     console.log(x) 
     var y = document.getElementById('y').value 
     var radius = document.getElementById('radius').value 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.beginPath(); 
     context.arc(x, y, 40, 0, Math.PI); 
     context.stroke(); 
    } 

    setInterval(draw, 10); 
}); 

http://codepen.io/whole_kernel/pen/XKRZVV

Answer 1

Sein wegen jquery. Sie versuchen, Funktionen zu verwenden, die jQuery definiert wurden. Fügen Sie diese in den Kopf:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

Answer 2

Die andere Antwort deutet darauf hin, dass Sie jQuery verwenden, indem Sie in dieser Datei verknüpfen.

Anstatt die jQuery ersetzen

$(document).ready(function(.... 

mit

window.addEventListener("load",function(.... 

Es macht das gleiche, und Ihre Seite wird geladen und schneller laufen. Warum laden Sie eine ganze Schnittstelle für nur eine Codezeile.