🪵 4. Canvas 마스터 클래스

Canvas API

• canvas는 클라이언트 환경에 따라 gpu 가속이 될 수도 있고 안될 수도 있지만, webGL은 기본적으로 GPU에서 담당합니다.
• canvas는 간단한 요구사항 서비스의 2D 그래픽 구현에 적합하고, webGL은 주로 고성능 3D 그래픽과 복잡한 상호작용에 적합합니다.
• WebGL은 상호작용 이벤트(마우스 클릭 등)을 직접 구현해줘야하는 반면 canvas는 이런 인터페이스를 기본으로 제공합니다.
• 내부 동작 흐름
  1. PATH 정의 :
     • vector 형태의 path 정보를 일시적으로 유지한다. 특정 위치와 방향에 대한 정보를 벡터 방식으로 저장합니다.
  2. 그리기 명령 :
     • fill, stroke, fillRect, strokeRect 등을 호출하면 canvas는 갖고 있던 vector 정보를 비트맵 이미지 픽셀 데이터로 변환되어, canvas의 비트맵 버퍼에 그려집니다.
  3. 그리기 이후 :
     • 이 시점부터 이미지는 비트맵 데이터로 다루어진다. 확대하거나 변환할 경우 비트맵 이미지로서 조작됩니다.
• 반응형일 경우 캔버스 크기 조정
  • 캔버스의 뷰포트 크기는 canvas 엘리먼트의 width, height 속성에 따라 결정됩니다.
  • css로 캔버스 크기를 늘려도 해상도는 그대로이기 때문에 좌표계 불일치 문제가 생길 수 있습니다.
  • 화면 크기가 바뀔 때 canvas를 재랜더링 해주던가, 아니면 좌표계도 함께 크기를 변경해주는 방법으로 해결 가능합니다.

Canvas API 기본 예제

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

• document.getElementById는 엘리먼트 객체의 참조를 얻어옵니다.
• canvas.getContext()는 엘리먼트의 컨텍스트(렌더링 될 그리기 대상)를 얻습니다.
  • ‘2d’ 매개변수로 호출하면 ‘CanvasRenderingContext2D’ 인터페이스를 얻게 되며, 해당 객체를 통해 컨텍스트 속성을 변경할 수 있습니다.
  • 2d 그리기에 필요한 여러가지 도구(메소드)를 제공합니다.

Canvas API 초기 설정

• 캔버스의 크기는 300px * 150px 가 기본 크기이다. html의 width와 height 속성을 변경하여 바꿀 수 있습니다.
• explore 9 이하 버전이나 텍스트 기반 브라우저 등 옛날 브라우저에서는 canvas를 지원하지 않을 수 있으므로, 이에 대한 호환성을 고려한다면 canvas 대체 컨텐츠 또한 고려해야 합니다.
• 대체 컨텐츠 삽입은 매우 쉽다. 아래 코드와 같이 canvas 태그 안에 대체 컨텐츠를 넣으면, canvas를 지원하지 않는 브라우저는 컨테이너를 무시하고 그 속의 내부 콘텐츠를 렌더링합니다.
  • getContext() 메소드의 존재 여부를 확인해 js 코드에서 canvas 태그 지원 여부를 확인하는 것도 가능합니다.

Canvas API 필수 요소

• canvas xormsms 닫는 태그를 꼭 필요로 한다. 닫는 태그를 작성하지 않는다면 문서의 나머지 부분이 컨텐츠로 간주되어 보이지 않을 수 있습니다.
• getContext() 메소드를 사용해 그리기 함수들을 사용 가능한 렌더링 컨텍스트를 가져올 수 있습니다.

CanvasRenderingContext2D

• 2D 그래픽을 기르는 다양한 메소드를 제공합니다.
• 기본적으로 캔버스 내 1grid의 단위는 1px과 같습니다.
• 원점은 좌측 상단(0, 0)입니다.
• SVG와 다르게 canvas는 ‘직사각형’ 도형 만을 제공합니다. 그 외 도형들은 무조건 하나 혹은 하나 이상의 path와 여러 점으로 이어진 선으로 만들어졌습니다.

METHOD

• fillRect(x, y, width, height) : 색칠된 직사각형을 그립니다.
• strockRect(x, y, width, height) : 직사각형 윤곽선을 그립니다.
• clearRect(x, y, width, height) : 특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다.
• rect(x, y, width, height) : 현재 열린 path에 직사각형 경로를 추가합니다.

drawing Path

• path(경로)는 점들의 집합이다. 이 점들의 집합은 각각이 연결되어 여러가지 도형, 곡선, 두께, 선, 색 등을 나타내게 됩니다.
• path 생성 순서는 아래와 같습니다.
  • 캔버스에 그릴 path(경로)를 만듭니다.
    • beginPath() : 새 path를 생성합니다.
    • moveTo(x, y) : path의 그리기 지점으로 이동합니다.
    • lineTo(x, y) : (x, y) 지점으로 경로를 그립니다.
    • closePath() : 현재 하위 경로의 시작 부분과 연결된 직선을 추가합니다.
  • 구성한 path를 그립니다. 경로들이 실제로 그려지기 위해 렌더링 큐에 올라갑니다.
    • stroke() : 윤곽선을 이용하여 도형을 그립니다.
      • 해당 메소드 호출 시에는 ‘선’을 그린 것이기 때문에, path가 닫히지 않습니다.
    • fill() : path의 내부를 채워서 내부가 채워진 도형을 그립니다.
      • 해당 메소드 호출 시 도형이 자동으로 닫히게 되어 closePath()를 호출할 필요가 없습니다. (stroke 메소드에는 적용되지 않음)
• path는 도형을 이루는 ‘하위 path’ 들의 집합으로 이루어져 있다. beginpath 메소드를 호출할 때 마다 이 하위 path 집합은 초기화되고, 새 도형을 그릴 수 있게 됩니다.
• arc, arcTo 메소드를 사용해 호나 원을 그리는 것도 가능합니다.
  • arc, arcTo

Path2D 객체

• 드로잉 명령을 캔버스 내에 캐시하거나 기록 가능합니다.
• new Path2D() 생성자는 새로운 Path2D 객체를 반환합니다. 선택적으로 다른 경로를 인수로 받거나(복사본을 생성), SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환합니다.

new Path2D(); // empty path object
new Path2D(path); // copy from another Path2D object
new Path2D(d); // path from SVG path data

• 모든 path 메소드는 Path2D 객체에서 사용 가능합니다.
• addPath 메소드로 경로를 결합하는 방법도 갖고 있습니다. 여러 요소를 사용하는 오브젝트를 만들 때 유용하게 사용할 수 있습니다.
  • addPath(path [, transform]) : 옵션으로 변환 행렬(transformation matrix)을 사용하여 현재 경로에 경로를 추가할 수 있습니다.

function draw() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}

• SVG Path 데이터를 사용하여 SVG와 canvas에서 경로 명령을 재사용 할 수 있습니다. var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

캔버스 꾸미기

Note
캔버스 속 내용은 스크린 리더를 사용하는 유저가 접근할 수 없습니다.
만약 캔버스를 순수히 꾸미는 용도로 사용하는 경우, <canvas> 시작 태그에 role="presentation"을 넣어줘야 합니다.
그렇지 않다면 캔버스 요소에 설명하는 내용을 aria-label 속성의 값으로 넣거나, 캔버스 태그 안에 대체 내용을 넣어야 합니다.
캔버스 속 내용은 DOM의 일부가 아니지만, 중첩 대체 내용은 DOM의 일부가 될 수 있습니다.

도형에 색을 사용하고자 한다면 아래 두 가지 속성을 사용할 수 있습니다.

• fillStyle = color : 도형을 채우는 색을 설정.
• strokeStyle = color : 도형의 윤곽선 색을 설정.

  • 여기서 color는 CSS의 , 그라디언트 객체, 패턴 객체 등이 될 수 있습니다.

    strokeStyle 또는 fillStyle 속성을 설정하면, 새로 설정된 값이 앞으로 그려질 도형의 기본 값이 됩니다. 각 도형에 다른 색을 적용하려면 fillStyle 또는 strokeStyle 속성을 다시 적용해야 합니다.

    ctx.fillStyle = "orange";
    ctx.fillStyle = "#FFA500";
    ctx.fillStyle = "rgb(255, 165, 0)";
    ctx.fillStyle = "rgba(255, 165, 0, 1)";
    // 위 형태 모두 사용 가능
    

투명도 적용

• globalAlpah : 같은 투명도의 도형 여러개를 그릴 때 유용하다. 해당 메소드로 투명도를 설정하면 이후부터 그려지는 도형은 모두 설정한 투명도로 그려집니다.
• css rgba() 를 사용해 개별 도형에 투명도 적용도 가능합니다.

선 및 채우기 스타일 변경

• 스타일과 색 적용하기

선을 그릴 때 bitmap 이미지의 특징으로 선이 흐려지는 효과를 방지하고 싶다면 선 두깨를 짝수로 설정.

Transformations

• transformations에는 그리드를 원점에서 다른 위치로 옮기고, 회전하고, 확대 및 축소까지 가능합니다.

상태 저장과 복원

• save() : canvas의 모든 상태를 저장합니다.
• restore() : 가장 최근에 저장된 canvas 상태를 복원합니다.
• canvas 상태는 스택에 쌓인다. save 메소드가 호출될 때 마다 현재 drawing 상태가 스택 위로 푸시된다. drawing 상태의 종류는 다음과 같습니다.
  • translate, rotate, scale 등
  • attribute 값 : strokeStyle, fillStyle, globalAlpha, lineWidth 등
  • 현재의 clipping path
• 도형 그리기가 아닌 그 도형의 속성값이 저장된다고 보면 됩니다.

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");

  ctx.fillRect(0, 0, 150, 150); // 기본 설정으로 사각형을 그리기
  ctx.save(); // 기본 상태를 저장하기

  ctx.fillStyle = "#09F"; // 설정 변경하기
  ctx.fillRect(15, 15, 120, 120); // 새로운 설정으로 사각형 그리기

  ctx.save(); // 현재 상태 저장하기
  ctx.fillStyle = "#FFF"; // 설정 변경하기
  ctx.globalAlpha = 0.5;
  ctx.fillRect(30, 30, 90, 90); // 새로운 설정으로 사각형 그리기

  ctx.restore(); // 이전 상태 복원하기
  ctx.fillRect(45, 45, 60, 60); // 복원된 설정으로 사각형 그리기

  ctx.restore(); // 초기 상태를 복원하기
  ctx.fillRect(60, 60, 30, 30); // 복원된 설정으로 사각형 그리기
}

원점 이동

• translate(x, y)는 그리드에서 canvas의 원점을 변경합니다.
• 상태 저장과 복원 기능과 함께 사용하면 좋습니다. 원점을 이동한 후 다시 (0, 0)으로 옮기는 것 보다, 상태 스택에 저장 후 다시 restore하는 게 일반적으로 간편합니다.

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
      ctx.save();
      ctx.fillStyle = "rgb(" + 51 * i + ", " + (255 - 51 * i) + ", 255)";
      ctx.translate(10 + j * 50, 10 + i * 50);
      ctx.fillRect(0, 0, 25, 25);
      ctx.restore();
    }
  }
}

// 위 코드는 사각형의 위치를 옮겨 그릴 때 마다 캔버스 위치를 옮겼다가 다시 restore 해준다.

• Path2D 경로를 상대 경로로 사용할 때에도, 위 방법을 사용하면 좋을 듯 합니다.

rotate

• 각도의 단위는 도(degree)가 아닌 라디안(radian)입니다. radians = (Math.PI/180)*degree
• 현재 원점 기준으로 회전합니다.

scaling(x, y) - x, y는 실수

• canvas 단위를 수평으로 x만큼, 수직으로 y만큼 확대 및 축소합니다.
• 음수를 이용해 축을 대칭 시킬 수도 있습니다.

transform

• 변환 행렬로 변경할 사항을 즉시 적용할 수 있습니다.

• 변경 사항이 누적되어 반영됩니다.

• transform(a, b, c, d, e, f)

• a (m11): 수평으로 확대·축소하기

• *b (m12): 수평으로 비스듬히 기울이기

• c (m21): 수직으로 비스듬히 기울이기

• d (m22): 수직으로 확대·축소하기

• e (dx): 수평으로 이동하기

• f (dy): 수직으로 이동하기

• setTransform (a, b, c, d, e, f) : 현재의 변형을 전체 초기화한 후 명시한 변형으로 변환합니다.

  • 내부 로직에서 transform을 사용하고 있습니다.

• 변환 행렬 에 대해 더 자세히 공부해야 정확하게 이해할 수 있을 것 같습니다.

도형 합성

• canvas에 새로 그려지는 도형들은 기본적으로 이전 도형 위에 그려집니다. 하지만 globalCompositeOperation 을 사용하면 이런 규칙 외에 다양한 도형 합성 방식으로 도형을 이어 그릴 수 있습니다.
• 기존 도형 뒤에 그리거나, 도형의 일정 영역을 가려 보이지 않게 하거나, 캔버스의 특정 부분을 지우는 등의 효과도 얻을 수 있습니다.

globalCompositeOperation = type
//도형 합성 방법을 설정한다. 26종류의 합성 방법 중 선택 가능하다.

• 도형합성

Clipping Path

• 흔히 사용하는 클리핑 마스크 기능입니다.
• clip() : 현재 그려지는 path를 클리핑 영역으로 설정합니다.
• path를 닫기 위해 closePath() 대신 clip()을 사용하고, 경로를 채우거나 윤곽선을 만드는 대신 클리핑 마스크로 만들 수 있습니다.
• 요소의 초기 설정값이기도 합니다. 캔버스는 캔버스 크기와 똑같은 크기의 잘라내기 경로를 가집니다.
• 잘라내기 경로는 마스킹할 도형의 하단에 그립니다.

Pixel 단위로 이미지 조작 (Pixel Manipulation)

• getImageData(x, y, width, height) : 캔버스 특정 영역의 픽셀 정보를 가져옵니다.
• putImageData(imageData, x, y) : tnwjdgks ImageData 객체를 캔버스에 다시 그립니다.
• data 배열 : ImageData의 data 속성. 각 픽셀의 RGBA 값이 1차원 배열로 저장됩니다.
  • data[i]는 빨간색, data[i+1]은 초록색, data[i+2]는 파란색, data[i+3]은 알파(투명도)
• 아래는 픽셀 데이터를 가져와 흑백 필더를 적용하는 예제입니다. (chat-gpt)

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 캔버스에 이미지를 로드한 후 픽셀 조작 시작
const img = new Image();
img.src = "path/to/your/image.jpg";
img.onload = () => {
  ctx.drawImage(img, 0, 0);
  
  // 이미지 데이터 가져오기
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 모든 픽셀을 순회하며 흑백 필터 적용
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];     // 빨강
    const g = data[i + 1]; // 초록
    const b = data[i + 2]; // 파랑

    // RGB 평균을 계산해 흑백으로 변환
    const avg = (r + g + b) / 3;
    data[i] = avg;         // 빨강
    data[i + 1] = avg;     // 초록
    data[i + 2] = avg;     // 파랑
  }

  // 수정된 이미지 데이터를 캔버스에 다시 그리기
  ctx.putImageData(imageData, 0, 0);
};

최적화 팁

반복적으로 그리는 이미지가 있다면 비가시용 캔버스를 만들어, 미리 그려 넣어라.

• 이후 필요한 순간에 비가시용 캔버스의 이미지를 주 캔버스에 그려넣어, 불필요한 렌더링 반복을 줄일 수 있습니다.

myCanvas.offscreenCanvas = document.createElement("canvas");
myCanvas.offscreenCanvas.width = myCanvas.width;
myCanvas.offscreenCanvas.height = myCanvas.height;

myCanvas.getContext("2d").drawImage(myCanvas.offScreenCanvas, 0, 0);

부동 소수점 좌표를 피하고 대신 정수를 사용해라.

ctx.drawImage(myImage, 0.3, 0.5);

• 위 처럼 이미지를 그릴 경우, 안티 앨리어싱(anti-aliasing) 효과를 만들기 위해 브라우저에서 추가 연산을 수행합니다.

drawImage에서 이미기 크기를 조정하지 마라.

• drawImage()에서 즉시 크기를 조정하지 말고 다양한 이미지 크기를 오프스크린(offscreen) 캔버스를 활용하면 성능이 향상될 수 있습니다.

복잡한 장면은 여러개의 레이어 캔버스를 사용해라.

• 캔버스 위에서 일부 도형은 자주 이동하거나 변경해야하지만, 다른 도형은 고정 위치에 남아야 하는 경우가 있습니다. 이 때는 캔버스 레이어를 나누는 것을 권장합니다.

<div id="stage">
  <canvas id="ui-layer" width="480" height="320"></canvas>
  <canvas id="game-layer" width="480" height="320"></canvas>
  <canvas id="background-layer" width="480" height="320"></canvas>
</div>

큰 배경 이미지는 일반 CSS를 사용하라.

• = 정적 배경 이미지가 있는 경우는 캔버스 뒷 쪽에 CSS로 세팅하라.

그 외 다양한 최적화 방법을 MDN 문서에서 읽어볼 수 있다.

참고 자료

• OpenGL ES란?
• Canvas API - Web API | MDN
• WebGL - Web API | MDN

추가 자료

• slack 풀스택 채널 추천 글
  • 브라우저의 렌더링 과정을 통해 캔버스 성능 살펴보기