1. Canvas

const ctx = HTMLCanvasElement.getContext('contextType');

🍳 contextType

• 2d: 2차원 렌더링 컨텍스트를 나타내는 CanvasRenderingContext2D 객체를 생성
• webgl: 3차원 렌더링 컨텍스트를 나타내는 WebGLRenderingContext 객체를 생성
• webgl2: 3차원 렌더링 컨텍스트를 나타내는 WebGL2RenderingContext 객체를 생성

const ctx = canvas.getContext('2d');

// 원형 그리기
function drawCircle(x,y){
    ctx.beginPath(); 
    ctx.arc(x,y,sizeText,0,Math.PI*2);
    ctx.fillStyle = color.value;
    ctx.fill();
}
// 선 그리기
function drawLine(x,y,x2,y2){
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x2,y2);
    ctx.strokeStyle = color.value;
    ctx.lineWidth = sizeText * 2;
    ctx.stroke();
}
// 초기화
ctx.clearRect(0,0,canvas.width,canvas.height);

• beginPath() : 새로운 경로를 생성하고 이후 명령들은 경로를 구성하고 만드는데 사용
• arc() : 호나 원을 그리기 위해 사용
  매개변수 👉 x, y, radius, startAngle, endAngle, anticlockwise
  설명 👉 (x,y)위치 원점, 반지름 radius, startAngle에서 시작하여 endAngle에서 끝남, anticlockwise 방향(기본값은 시계방향)
• fillStyle : 모양 내부에 사용할 색상, 패턴, gradient 지정
• fill() : 현재 fillStyle로 내부를 채움