preface

This section discusses one of the most useful features on Canvas: the Clipping Region. It is an area within the canvas defined by a path, and the browser limits all drawing operations to this area. By default, the clipping area is the same size as the canvas. — HTML5 Canvas Core Guide

Canvas’s clip() method allows drawing operations to be performed only in a certain area, which brings infinite imagination. Specific code in CodePen Demo as follows (ignore Baidu search) :

CodePen open

Because this article mainly talks about eraser application, so it will ignore the drawing part of the idea of this article is as follows:

  • Clip () method to explain
  • The Demo idea
  • The code segment
    • mousedown
    • mousemove
    • mouseup
  • conclusion
  • The resources

Clip () method to explain

The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the current or given path into the current clipping region. It replaces any previous clipping region. In the image below, the red outline represents a clipping region shaped like a star. Only those parts of the checkerboard pattern that are within the clipping region get drawn.  ——MDN

As shown above, the pentagram region is circled by path in the image, and then the region is captured by clip(). After that, all drawing operations will only take effect within the pentagram region

So how do we manage and change the clipping area that we’re using? For example, the default clipping area was the entire canvas at the beginning. Now our clipping area is a five-pointed star. How to restore the state of the entire canvas and continue clipping? Use of CTX. The save () and CTX. Restore () method: CanvasRenderingContext2D. The save () – The drawing state

Before selecting the clipping region, we use ctx.save() to save the current state. After clipping region and drawing operation is complete, we use ctx.restore() to restore the previous clipping region

👆 We will also use this technique in the eraser application

The Demo idea

Let’s start by explaining two of the more important variables: lastX and lastY. These two variables record the location of the region to be erased and are used to set the corresponding clipping region in the setsetErasePathForEraser() method, which is updated in mousedown and Mousemove phases

The general idea diagram is as follows:

The erasure function is mainly based on the eraseLast() method, which we will explain

Key Code Explanation — eraseLast()

        function eraseLast() {
            ctx.save();
            
            setErasePathForEraser(); // Set the erasure path // 👆setCtx.clip () in the ErasePathForEraser() method specifies the clipping region, Ctx.clearrect (0, 0, ctx.canvas.width, ctx.canvas.height) ctx.restore(); }Copy the code

First, the ctx.save() method saves the current clipping area (the default Canvas canvas); In the second step, the setErasePathForEraser() method uses ctx.clip() to define the clipping region. The subsequent drawing effect will only occur in the clipping region. In the third step, ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height) clears the canvas, but since the clipping area is specified, the effect will only occur within the clipping area; Finally, the ctx.restore() method restores the saved canvas state, restoring the original clipping area (consider continuing the drawing, etc.)

conclusion

This Demo is a simple application of the clip() method, which defines the range — > empty, and completes the eraser function

The resources

The HTML 5 Canvas core technology “MDN — CanvasRenderingContext2D. Clip ()

MDN — CanvasRenderingContext2D. The save ()