javascript - Why is document.getElementById returning a null value? -

I have debug my code and have realized that one method in my javascript is not working properly Why is there any idea?

index.html :

  & lt ;! DOCTYPE html & gt; & Lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; Tetris & lt; / Title & gt; & Lt; Link rel = "stylesheet" href = "css / app.css" & gt; & Lt; Script type = "text / javascript" src = "js / main.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Canvas ID = "Tetrisboard" width = "800" height = "600" & gt; Your browser does not support HTML5. & Lt; / Canvas & gt; & Lt; P & gt; & Lt; / P & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
  main.js :  
  board = document. GetElementById ("Tetrisbord") ctx = board.getContext ("2 D. "Ctx.fillStyle =" RGB (200, 0, 0) "ctx.fillRect 10, 10, 55, 50   
 result of  document.getElementById (" tetrisBoard ")  Why is a zero value?   
 
 
 Because you are saying your code before existing elements Be sure to correct the script before the closing body tag and you will be cured.