<div style="color: #eeffff; background-color: #212121; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div> canvas: document.querySelector("#video_canvas-0"),</div>
<div> context: canvas.getContext('2d'),</div>
<div></div>
<div>이렇게 쓰면 script가 제대로 작동이 안되는데 </div>
<div>
<div style="line-height: 18px;">
<div>canvas: document.querySelector("#video_canvas-0"),</div>
<div>context: document.querySelector("#video_canvas-0").getContext('2d'),</div>
<div>이렇게 써야하는 이유가 궁금합니다.</div>
</div>
</div>
</div>

canvas는 변수가 아니라 해당 객체(object)의 속성(property)이기 때문입니다. 위치에 상관 없이, 자바스크립트에서 따옴표가 없는 문자는 변수 이름이라는 것을 생각해보시면 됩니다^^ 그래서 canvas로 접근하면, canvas라는 변수를 선언한 적이 없기 때문에 에러가 날거에요~

인프런 커뮤니티 질문&답변

.context('2d') 사용