[Canvas] Canvas 태그 와 기본 작동 순서

목차)
1. Canvas 태그란?

2. 기본 작동 순서
1) 요소 선택
2) getContext()
3) beginPath()

3. 정리

1. Canvas 태그란?

HTML5 에서 도입되었으며, 그래픽을 그리기 위한 요소이다.

Javascript를 사용하여 동적인 그래픽과 애니메이션을 생성할 수 있다.

Canvas 태그는 그리기 영역을 제공해주는 것이며, 픽셀 기반의 그래픽 처리를 지원한다.

2. 기본 작동 순서

React를 활용하여 Canvas 태그를 작동시키려고 한다.

canvas tag를 사용하기 위한 기본적인 순서와 간단한 기능을 알아보자.

1) 요소 선택 (useRef)

먼저 어떤 canvas에 그래픽을 그릴지 선택해야 한다.

React [ useRef ]는 DOM요소에 접근하여 해당 요소를 참조할 수 있게 해준다.

canvas 태그에 useRef로 접근하는 이유는 해당 요소를 참조하여 Javascript를 사용해야 하는 것도 있지만,

DOM 요소에 접근하여 Javascript의 코드를 실행하기 때문에, 상태 변화에 따른 리렌더링을 발생시키지 않기 때문이다.

그럼 먼저 아래와 같이 canvas 태그를 생성하고, useRef를 적용하여 접근하자.

import React, { useLayoutEffect, useRef } from "react";
import styled from "styled-components";

const CanvasView: React.FC = () => {
    const canvasRef = useRef<HTMLCanvasElement>(null);
    
    useLayoutEffect(() => {
        if (canvasRef.current) {
            //캔버스 태그가 잘 참조되었는지 확인
	   console.log(canvasRef.current)
        }
    }, [canvasRef]);

    return (
        <CanvasViewLayout>
            <Canvas ref={canvasRef} />
        </CanvasViewLayout>
    );
};

export default CanvasView;

const CanvasViewLayout = styled.div``;

const Canvas = styled.canvas`
    width: 500px;
    height: 500px;
`;

2) getContext()

참조한 <canvas> 요소의 그래픽 렌더링 컨텍스트를 가져오는 역할을 한다.

CanvasRenderingContext2D, WebGLRenderingContext, WebGL2RenderingContext 등의 그래픽 컨텍스트를 지원한다.

우리는 CanvasRenderingContext2D 그래픽 컨텍스트를 활용할 것이다.

쉽게 말하면 2D 로 그래픽을 그리겠다는 의미이다.

참조한 <canvas> 요소에 그래픽을 그리는 draw() 함수를 하나 만들어 진행해보려고 한다.

import React, { useLayoutEffect, useRef } from "react";
import styled from "styled-components";

const CanvasView: React.FC = () => {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    useLayoutEffect(() => {
        if (canvasRef.current) {
            //그래픽을 그릴 canvas 요소
            draw(canvasRef.current);
        }
    }, [canvasRef]);

    const draw = (canvas: HTMLCanvasElement) => {
    	//CanvasRenderingContext2D 가져오기.
        const ctx = canvas.getContext("2d");
    };

    return (
        <CanvasViewLayout>
            <Canvas ref={canvasRef} />
        </CanvasViewLayout>
    );
};

export default CanvasView;

const CanvasViewLayout = styled.div``;

const Canvas = styled.canvas`
    width: 500px;
    height: 500px;
`;

3. beginPath()

Path(경로)는 한번에 그릴 무언가를 의미한다고 생각하면 된다.

예를 들어 파란 네모난 상자에 빨간 테두리를 입히고 싶다고 해보자.

먼저 파란 네모난 상자를 그린 후, 빨간 테두리를 그리게 될 것이다.

그럼 여기서 파란 네모난 상자(path) 와 빨간 테두리(path)로 2개의 path를 그리는 것이다.

각 path를 그리기 전 beginPath()를 작동시켜 서로 분리된 path 라는 것을 알려준다.

import React, { useLayoutEffect, useRef } from "react";
import styled from "styled-components";

const CanvasView: React.FC = () => {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    useLayoutEffect(() => {
        if (canvasRef.current) {
            //그래픽을 그릴 canvas 요소
            draw(canvasRef.current);
        }
    }, [canvasRef]);

    const draw = (canvas: HTMLCanvasElement) => {
    	//CanvasRenderingContext2D 가져오기.
        const ctx = canvas.getContext("2d");
        
          if (ctx) {
            //먼저 파란 상자를 그린다.
            ctx.beginPath();
            ctx.fillStyle = "blue";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

	    //빨간 테두리를 그린다.
            ctx.beginPath();
            ctx.strokeStyle = "red";
            ctx.lineWidth = 3;
            ctx.rect(0, 0, canvas.width, canvas.height);
            ctx.stroke();
        }
    };

    return (
        <CanvasViewLayout>
            <Canvas ref={canvasRef} />
        </CanvasViewLayout>
    );
};

export default CanvasView;

const CanvasViewLayout = styled.div``;

const Canvas = styled.canvas`
    width: 500px;
    height: 500px;
`;

3. 정리

Canvas 태그를 사용하기 위한 가장 기본적인 단계를 알아보았다고 생각하면 된다.

어떻게 그림을 그려나갈지 설계하고, 필요한 Method는 검색하면 된다.

예를 들어 동그라미안에 어떤 이미지를 넣고 싶다면

1. 그래픽을 그릴 canvas 태그 생성 및 참조
2. 동그라미를 그리는 Path
3. 이미지를 넣는 Path

이런 방식으로 그려 나갈 수 있을 것이다.

dev-log by GunWoo