CanvasRenderingContext2D: метод clearRect()

Метод CanvasRenderingContext2D.clearRect() API холста 2D стирает пиксели в прямоугольной области, устанавливая их в прозрачный чёрный цвет.

clearRect(x, y, width, height)

Метод clearRect() устанавливает пиксели в прямоугольной области в прозрачный чёрный цвет (rgb(0 0 0 / 0%)). Верхний левый угол прямоугольника находится в (x, y), а его размеры задаются width и height.

x

Координата x начальной точки прямоугольника.

y

Координата y начальной точки прямоугольника.

width

Ширина прямоугольника. Положительные значения — вправо, отрицательные — влево.

height

Высота прямоугольника. Положительные значения — вниз, отрицательные — вверх.

Ничего (undefined).

Этот фрагмент кода очищает весь холст. Это часто требуется в начале каждого кадра анимации. Размеры очищаемой области задаются равными атрибутам <canvas> элемента width и height.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

В этом примере рисуется синий треугольник поверх жёлтого фона. Затем метод clearRect() очищает часть холста.

HTML

<canvas id="canvas"></canvas>

JavaScript

Очищаемая область имеет прямоугольную форму, с верхним левым углом в (10, 10). Очищаемая область имеет ширину 120 и высоту 100.

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

// Draw yellow background
ctx.beginPath();
ctx.fillStyle = "#ff6";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw blue triangle
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.lineTo(130, 130);
ctx.closePath();
ctx.fill();

// Clear part of the canvas
ctx.clearRect(10, 10, 120, 100);

Результат

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• CanvasRenderingContext2D.fillRect()
• CanvasRenderingContext2D.strokeRect()