HTML Canvas – clearRect() 메서드

Canvas clearRect() 메서드

Canvas에서 clearRect() 메서드는 지정된 직사각형 영역 내의 모든 픽셀을 투명하게 지우는 기능을 한다.

기본 문법

clearRect() 메서드의 기본 구문은 다음과 같다.

context.clearRect(x, y, width, height);

예제: 사각형 내부 지우기

다음 예제는 빨간색 사각형을 그린 후 그 내부에 작은 영역을 투명하게 지운다.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas");

  var ctx = c.getContext("2d");

  ctx.fillStyle = "red";

  ctx.fillRect(20, 20, 150, 100);

  ctx.clearRect(50, 50, 50, 30);

</script>

위 예제에서 fillRect() 메서드로 먼저 빨간색 사각형을 그린 다음, clearRect() 메서드로 그 내부에 작은 투명한 창을 만든다. clearRect() 메서드로 지워진 영역은 완전히 투명해져서 캔버스의 배경색이나 그 아래에 있는 요소가 보이게 된다.

전체 캔버스 지우기

전체 캔버스를 지우려면 캔버스의 전체 크기와 동일한 매개변수로 clearRect()를 호출하면 된다.

<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas2");

  var ctx = c.getContext("2d");

  ctx.fillStyle = "green";

  ctx.fillRect(10, 10, 280, 130);

  function clearCanvas() {

    ctx.clearRect(0, 0, c.width, c.height);

  }

  setTimeout(clearCanvas, 2000);

</script>

이 예제는 먼저 녹색 사각형을 그린 다음 2초 후에 전체 캔버스를 지운다.

복잡한 도형에서 영역 지우기

복잡한 도형을 그린 후 특정 부분만 지울 수도 있다.

<canvas id="myCanvas3" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas3");

  var ctx = c.getContext("2d");

  ctx.fillStyle = "blue";

  ctx.fillRect(20, 20, 260, 110);

  ctx.fillStyle = "yellow";

  ctx.beginPath();

  ctx.arc(150, 75, 50, 0, 2 * Math.PI);

  ctx.fill();

  ctx.clearRect(100, 50, 100, 50);

</script>

이 예제에서는 파란색 사각형과 노란색 원을 그린 후, clearRect()를 사용하여 두 도형이 겹치는 영역의 일부를 지운다.

애니메이션에서의 활용

clearRect() 메서드는 캔버스 애니메이션을 만들 때 특히 유용하다. 각 프레임을 그리기 전에 캔버스를 지우는 데 사용된다.

<canvas id="myCanvas4" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas4");

  var ctx = c.getContext("2d");

  var x = 20;

  function draw() {

    ctx.clearRect(0, 0, c.width, c.height);

    ctx.fillStyle = "red";

    ctx.fillRect(x, 50, 50, 50);

    x += 2;

    if (x > c.width) {

      x = -50;

    }

    requestAnimationFrame(draw);

  }

  draw();

</script>

이 예제는 캔버스에서 오른쪽으로 이동하는 빨간색 정사각형을 애니메이션으로 보여준다. 각 프레임마다 clearRect()로 전체 캔버스를 지운 다음 새로운 위치에 사각형을 다시 그린다.

복잡한 영역 지우기

전체 사각형 영역이 아닌 더 복잡한 모양을 지우려면 clearRect()와 clip()을 조합하여 사용할 수 있다.

<canvas id="myCanvas5" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas5");

  var ctx = c.getContext("2d");

  ctx.fillStyle = "purple";

  ctx.fillRect(0, 0, c.width, c.height);

  ctx.save();

  ctx.beginPath();

  ctx.arc(150, 75, 50, 0, 2 * Math.PI);

  ctx.clip();

  ctx.clearRect(0, 0, c.width, c.height);

  ctx.restore();

</script>

이 예제에서는 전체 캔버스를 보라색으로 채운 다음, 원형 영역을 지정하고 clip() 메서드로 클리핑 영역을 설정한 후 clearRect()로 해당 영역만 지운다. 결과적으로 보라색 배경에 원형 구멍이 뚫린 효과를 얻을 수 있다.

💡 clearRect 활용 팁:
• 일반적으로 애니메이션을 시작하기 전에 캔버스를 초기화하는 데 사용한다
• 부분적으로 도형을 지우려면 정확한 좌표 계산이 필요하다
• 복잡한 모양을 지우려면 clearRect()와 clip()을 함께 사용한다

이미지와 함께 활용하기

clearRect()를 이용해 이미지의 특정 부분을 투명하게 만들 수도 있다.

<canvas id="myCanvas6" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas6");

  var ctx = c.getContext("2d");

  var img = new Image();

  img.onload = function() {

    ctx.drawImage(img, 0, 0, c.width, c.height);

    ctx.clearRect(100, 50, 100, 50);

  };

  img.src = "landscape.jpg";

</script>

이 예제에서는 이미지를 캔버스에 로드한 다음 clearRect()를 사용하여 이미지의 일부를 투명하게 만든다.

clearRect() 메서드는 Canvas에서 특정 영역을 지우는 간단하면서도 강력한 방법이다. 애니메이션, 그래픽 편집, 인터랙티브 요소 만들기 등 다양한 상황에서 활용할 수 있다.