Pobieranie obiektu canvas i wyodrębnianie kontekstu - krótkie pytanie.

pytanie zadane 3 lipca 2016 w JavaScript przez String Gaduła (4,520 p.)

Cześć :)
Dlaczego, gdy napiszę takie linijki kodu:

window.onload = function() {
  var canvas = document.getElementById("Canvas");
  var context = canvas.getContext("2d");
};

wszystko sprawnie działa - pobranie obiektu i wyodrębnienie kontekstu.

Jeśli jednak usunę window.onload
a tych 2 linijek:

 var canvas = document.getElementById("drawingCanvas");
 var context = canvas.getContext("2d");

Nie umieszczę w funkcji przypisanej do zdarzenia window.onload -> pobranie obiektu canvas nie zadziała..
Analogicznie dołączanie funkcji do zdarzeń rysowania nie zadziała gdy nie umieszczę ich w window.onload..

canvas.onmousedown = startDrawing;
 canvas.onmouseup = stopDrawing;

Pytam, dlatego że w starszych poradnikach wszędzie przypisywanie funkcji do zdarzeń zapisywane jest identycznie jak deklarowanie funkcji globalnych tzn. nie w żadnej z funkcji tylko w pliku.js

Podobnie z metodą addEventListener() : canvas.addEventListener('mousemove', nazwafunkcji);
Gdy zapiszę to w funkcji przypisanej do zdarzenia onload - wszystko działa. Gdy zapisze powyższe linijki kodu poza funkcjami - nie działa.

Czy coś się zmieniło? czy może tylko u mnie jest coś nie tak? Trochę drażni mnie takie wklepywanie wszystkiego do tego jednego zdarzenia. ;/

1 odpowiedź

odpowiedź 3 lipca 2016 przez Magicone Nałogowiec (45,100 p.)

Obstawiam, że skrypt jest ładowany i wykonywany bezpośrednio przed parsowaniem reszty dokumentu, w tym elementu. Dlatego odwołując się do elementu tak naprawdę wynikiem jest… nic, co powoduje Twoje błędy. :D Tagi <script>, które dotyczą manipulacji na elementach DOM daj na koniec <body> i po problemie.