Очистка канваса в HTML5

Метод использования clearRect() в HTML5 Canvas, функция 2D контекста clearRect() используется для удаления прямоугольника с канвы. Удаленный прямоугольник становится прозрачным.

Онлайн пример

Функция 2D контекста clearRect() используется для удаления прямоугольника с канвы. Удаленный прямоугольник становится прозрачным. Вот пример кода:

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">　　　　
HTML5 Canvas не поддерживается　　　　
</canvas>　　　　
<script>　　　　
var canvas = document.getElementById("ex1");　　　　
var context = canvas.getContext("2d");　　　　
context.fillStyle = "#ff0000";　　　　
context.fillRect(10, 10, 100, 100);　　　　
context.strokeStyle = "#0000ff";　　　　
context.strokeRect(30, 20, 120, 110);　　　　
context.clearRect(50, 30, 110, 35);　　　　　　　　　
</script>

Обратите внимание, как очищается rectangle в красном и синем rectangles.
Как было сказано ранее, использование clearRect() делает area прозрачной. Если элемент canvas установлен над другим элементом, то содержимое этого элемента будет видимо через area, который был удалён.

clearRect(x, y, width, height)

Как и при рисовании прямоугольника, переданные четвёрке параметрам clearRect() представляют собой левый верхний угол rectangles, которые нужно удалить, а также ширину и высоту rectangles, которые нужно удалить.
Это более ясный пример:

var x = 50;
var y = 30;
var width = 110;
var height = 25;
context.clearRect(x, y, width, height);