HTML5 canvas clear rectangle example

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>
refresh

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments