JavaScript에서 canvas 시작하기

Canvas는 JavaScript로 브라우저에서 그리기 위한 특별한 영역입니다. 이 영역은 <canvas> 태그를 사용하여 만들며, 너비와 높이를 지정해야 합니다:

<canvas width="200" height="200"></canvas>

JavaScript로 이 영역을 사용하려면 먼저 이 태그에 대한 참조를 어떤 변수로 가져와야 합니다:

let canvas = document.querySelector('canvas');

그런 다음 이 변수에 getContext 메서드를 적용해야 합니다:

let canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

다음과 같이 단순화할 수 있습니다:

let ctx = document.querySelector('canvas').getContext('2d');

결과적으로 ctx 변수에는 소위 실행 컨텍스트가 포함된 객체가 기록됩니다. 모든 그리기는 이 객체의 메서드를 사용하여 이루어집니다. 다음 강의에서 이 메서드들을 공부해 보겠습니다.