I have one canvas with image, on that i have drawn one rectangle with red color.Now i want to clear that red color rectangle on touch event of user, My problem is it clears image too. It is not showing image.

Using code:

```
<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
     ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 300, 150);
     ctx.clearRect(20, 20, 100, 50);
}
</script>

</body>
</html>

```

My Result is:
[![enter image description here](https://i.stack.imgur.com/uqJyg.png)](https://i.stack.imgur.com/uqJyg.png)

What i expect :[![enter image description here](https://i.stack.imgur.com/Ou3oI.png)](https://i.stack.imgur.com/Ou3oI.png)

Also, I have checked this [Fiddle](http://jsfiddle.net/ArtBIT/WUXDb/1/) , Now How can I fill color on that removed area again.