html tutorial - clip Method in HTML5 Canvas - html5 - html code - html form



  • The clip() is the method of HTML5 canvas.
  • The clip() method is used to clips an area of any shape and size from the original canvas.

Syntax for clip() method in HTML5 Canvas:

context.clip();

Sample Coding for clip() method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>wikitechy clip method in canvas</title>
    </head>
    <body>
        <h2>wikitechy clip method in canvas</h2>
        <span>Without clip():</span>
        <canvas id="wikitechyCanvas" width="300" height="150"      
               style="border:1px solid blue;">
        </canvas>
        <script>
            var c = document.getElementById("wikitechyCanvas");
            var context = c.getContext("2d");
            context.rect(40, 20, 200, 120);
            context.stroke();
            context.fillStyle = "orange";
            context.fillRect(10, 10, 150, 100);
        </script>
        <span>With clip():</span>
        <canvas id="wikitechyCanvas1" width="300" height="150"      
               style="border:1px solid blue;">
        </canvas>
        <script>
            var c = document.getElementById("wikitechyCanvas1");
            var context = c.getContext("2d");
            context.rect(40, 20, 200, 120);
            context.stroke();
            context.clip();
            context.fillStyle = "orange";
            context.fillRect(10, 10, 150, 100);
        </script>
    </body>
</html>

Code Explanation for clip() method in HTML5 Canvas:

clip method in HTML5 canvas Code Explanation

  1. “wikitechyCanvas” is declare id value for the HTML canvas.
  2. The getElementById(); method is used to get the element with the specific id (“wikitechycanvas”).
  3. Without clip:
  4. rect() method is used to drawing a rectangle in the canvas(40,20,200,120).
  5. The stroke()method is used to draws a path.
  6. The fillstyle propery is used to fill orange color to a rectangle.
  7. The fillRect() method is used to draw a filled rectangle in the canvas(10,10,150,100).
  8. With clip:
  9. rect() method is used to drawing a rectangle in the canvas.same rectangle size of without clip.
  10. clip() method is used to clips an any shape and any size from the original canvas.

Output for clip() method in HTML5 Canvas:

clip method in HTML5 canvas Output

  1. The HTML canvas rectangle is blue border in without clip.
  2. The rectangle box with default black color in without clip by using stroke() method.
  3. This shows that orange color rectangle drawn by using rect() method.
  4. The HTML canvas rectangle is blue border in with clip.
  5. The rectangle box with default black color in with clip by using stroke method.
  6. The part of the orange rectangle that is inside the clipped area only visible.

Browser Support for clip() method in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Tips and Notes

  • Once a region is clipped, all future drawing will be limited to the clipped region that means no access to other regions on the canvas.
  • You can save the current canvas area using save() method before using the clip() method, and restore it using restore() method any time in the future.

Related Searches to clip method in html5 canvas