HTML의 <canvas>태그 + JavaScript ⇒ 다양한 그래픽 요소 가능(도형, 데이터 시각화, 애니메이션 , 웹 게임)

기본설정

<canvas id='canvas' width='50vw' height='40vh'>
 캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됨
</canvas>

캔버스의 크기를 설정해주지 않으면 기본적으로 300px*150px 사이즈로 생성됨

const canvas = document.querySelector('#canvas'); // DOM으로 엘리먼트 선택

const ctx = canvas.getContext('2d');
// 캔버스에 그래픽 작업을 할 수 있게 해주는 여러 속성과 메소드들이 들어있는 객체를 불러옴

canvas로 사각형 그리기

• 색칠된 사각형 그리기

ctx.fillStyle = 'blue'
// fillStyle 속성으로 색칠할 색상을 정함

ctx.fillRect = (10,10,100,50)
// fillRect 메소드로 사각형을 그린다
// 전달 인자는 x좌표,y좌표,가로길이,세로길이

• 선으로만 사각형 그리기

ctx.lineWidth = 5; // 선의 굵기
ctx.strokeStyle = 'black'; // 선의 색상을 정함

ctx.strokeRect(10,10,100,50)
// strokeRect메소드로 사각형을 그린다

• 사각형으로 지우기