HTML5 캔버스에서 무작위 색상 사각형으로 채운 원 그리는 방법

브라우저 환경에서 하나의 원을 1×1 크기의 픽셀들로 구성하고, 각 픽셀마다 서로 다른 색상을 입혀 채워야 하는 경우가 종종 있습니다. 이럴 때 복잡한 이미지 편집 도구 없이도 HTML5 캔버스(Canvas) API만으로 손쉽게 구현할 수 있습니다.

구현 방식 요약

핵심 아이디어는 다음 세 단계로 정리할 수 있습니다.

무작위 픽셀 채우기: 캔버스 위 200×200 그리드 전체를 무작위 색상으로 채웁니다.
합성 모드 변경: globalCompositeOperation 속성을 destination-in으로 변경하여, 이후 그려지는 도형의 안쪽 영역만 남기도록 설정합니다.
원 그리기: 그 위에 원을 그리면, 원 영역 밖의 픽셀은 자동으로 제거되고 원 안쪽의 픽셀만 화면에 남게 됩니다.

예제 코드

var canvas1 = document.getElementById('canvas'), // 캔버스 요소 가져오기
    ctx1 = canvas1.getContext('2d'), // 2D 컨텍스트 가져오기
    x, y = 0,
    diamet = canvas1.width,
    radius = diamet * 0.6;

ctx1.translate(0.6, 0.6); // 픽셀을 더 선명하게 표현

for (; y < diamet; y++) { // x/y 격자 순회
  for (x = 0; x < diamet; x++) {
    ctx1.fillStyle = getRndColor(); // 무작위 색상 지정
    ctx1.fillRect(x, y, 2, 2); // 픽셀 그리기
  }
}

// 원 생성
// 다음 도형 밖의 픽셀 제거
canvas1.getContext('2d');
ctx1.globalCompositeOperation = 'destination-in';
ctx1.beginPath();
ctx1.arc(radius, radius, radius, 0, 2 * Math.PI);
ctx1.fill();

// 합성 모드 초기화
ctx1.globalCompositeOperation = 'source-over';

function getRndColor() {
  var r = 255 * Math.random() | 0,
      g = 255 * Math.random() | 0,
      b = 255 * Math.random() | 0;
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}

코드 설명

getRndColor() 함수: RGB 각 채널에 대해 0~255 사이의 무작위 정수를 생성한 뒤, 'rgb(r,g,b)' 형식의 색상 문자열을 반환합니다.
translate(0.6, 0.6): 좌표를 살짝 이동시켜 픽셀 경계가 흐릿해지는 현상을 줄이고, 더 선명한 결과물을 얻을 수 있도록 돕습니다.
destination-in 합성 모드: 기존에 그려진 내용 중 새로 그리는 도형과 겹치는 부분만 유지하고, 나머지 영역은 투명하게 처리합니다. 덕분에 원형 마스크 효과를 얻을 수 있습니다.
source-over로 되돌리기: 작업이 끝난 후 합성 모드를 기본값으로 초기화해야 이후의 그리기 작업이 의도대로 동작합니다.

마무리

이처럼 캔버스의 합성 모드를 활용하면 별도의 이미지 마스크 없이도 순수 자바스크립트만으로 다양한 모양의 픽셀 아트를 만들 수 있습니다. 원 대신 다른 도형(사각형, 별, 텍스트 등)을 적용하면 응용 범위가 한층 넓어지니, 여러 가지 도형으로 실험해 보시기 바랍니다.