CanvasRenderingContext2D.clearRect()

CanvasRenderingContext2D.clearRect() - очищає canvas у вказаному прямокутнику.

Синтаксис:

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

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

x - координати по осі x початкової точки прямокутника.

y - координати по осі y початкової точки прямокутника.

width - ширина прямямокутника.

height - висота прямокутника.

Опис:

clearRect() метод об'єкту CanvasRenderingContext2D який очищає полотно canvas у заданому прямокутнику.

Приклад:

Приклад очищення частини полотна canvas:

var canvas = document.getElementById("canvas").getContext("2d");
canvas.strokeStyle="red";
canvas.fillStyle="blue";
canvas.moveTo(0, 0);
canvas.lineTo(120, 168);
canvas.stroke();

canvas.clearRect(10, 8, 50, 67);

Приклад очищення всього полотна canvas:

var el = document.getElementById("canvas");
var canvas = el.getContext("2d");
//малюємо на полотні
canvas.strokeStyle="red";
canvas.fillStyle="blue";
canvas.moveTo(0, 0);
canvas.lineTo(120, 168);
canvas.stroke();

//очищаємо полотно
canvas.clearRect(0, 0, el.width, el.height);