HTML에서 <canvas>란?

<canvas> element는 웹페이지에서 그래픽을 그릴 대 사용하는 컨테이너이다.

- 선분, 사각형, 원, 문자, 이미지 추가하는 메서드 존재

- 그래픽을 그리기 위해 자바스크립트를 사용해야 함

참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage

예시)

const canvas = document.getElementById("number");       //id로 canvas element에 접근
const ctx = canvas.getContext("2d");                    //2d 그래픽을 그릴 수 있는 메서드를 지닌 HTML5 오브젝트
const x = 32;                                           //원점 x 좌표
const y = 32;                                           //원점 y 좌표
 
const radius = 30;                                      //반지름
const startAngle = 0;                                   //0도
const endAngle = Math.PI * 2;                           //360도
 
ctx.fillStyle = "rgb(0,0,0)";                           //채우기 색 설정
ctx.beginPath();                                        //새로운 경로 생성, 경로 생성 후 그리기 명령들은 경로를 구성하고 만드는데 사용
ctx.arc(x, y, radius, startAngle, endAngle);            //x,y위치에 원점을 두고, radius 반지름을 가지고, startAngle에서 시작하여 endAngle에서 끝나며 주어진 방향(옵션 기본값은 시계방향)으로 호 그림
ctx.fill();                                             //경로의 내부를 채워서 내부가 채워진 도형을 그린다. 열린도형은 자동으로 닫히므로 closePath()호출 필요 X
 
ctx.strokeStyle = "rgb(255,255,255)";                   //윤곽선의 색 설정
ctx.lineWidth = 3;                                      //윤곽선의 두께
ctx.beginPath();                                        //새로운 경로 생성
ctx.arc(x, y, radius, startAngle, endAngle);            //원 생성
ctx.stroke();                                           //윤곽선을 이용하여 형 그림
 
ctx.fillStyle = "rgb(255,255,255)";                     //채우기 색 설정
ctx.font = "32px sans-serif";                           //문자 폰트 크기, 글씨체
ctx.textAlign = "center";                               //문자 정렬
ctx.textBaseline = "middle";                            //베이스 라인 정렬 설정
ctx.fillText("1", x, y);                                //주어진 x,y 위치에 주어진 "1" 텍스트를 채움, 최대폭 maxwidth 옵션값