Rectangle clear

In this chapter you will learn:

  1. How to clear a rectangle region

Clear a rectangle

The clearRect method clear what has been drawn in the specified rectangle.

<!DOCTYPE HTML><!-- j  a v a  2s .  co m-->
<html>
<head>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="500"> 
    Your browser doesn't support the <code>canvas</code> element 
    </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillRect(10, 100, 100, 100);
            ctx.strokeRect(130, 130, 100, 100);
            ctx.clearRect(150, 150, 30, 10);}
      </script>
</body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. How to use drawing state
Home » Javascript Tutorial » Canvas
Canvas tag
Canvas Context
Rectangle
Rectangle clear
Drawing State
Drawing state restore
Line width
Line Join Style
Line cap settings
Gradients
Linear Gradient
Radial Gradient
Path
Arcs
Two types of curve
Quadratic Bezier Curves
Cubic Bezier Curves
Clip
Text
Shadow
Transparency
Stoke style