HTML5 canvas clear rectangle example using clearRect(). The cleared rectangle becomes transparent and canvas background color is visible if set. Note that clearRect order is important. If anything is drawn on a cleared area, then it wont have any effect.
<canvas id="mycanvas1" width="200" height="100" style="background-color:lightgray;"></canvas>
<script type="text/javascript">
window.addEventListener("load", draw);
function draw() {
var canvas = document.querySelector('#mycanvas1');
var context = canvas.getContext('2d');
context.fillStyle = "green";
context.fillRect(10,10,80,80);
context.clearRect(20,20,40,40);
}
</script>
