When the canvas.width is set, the Browser will set the CanvasRenderingContext2D.imageSmoothingEnabled to betrue automatically.

• Demo

As the CanvasRenderingContext2D.imageSmoothingEnabled is a user-writable property, it look confused when user set the property to be false, and after a while found the value changed to true without explicitly notified.

This behavior is defined in W3C Specification as:

1. Whenever the width and height content attributes are set, removed, changed, or redundantly set to the value they already have, then the user agent must perform the action from the row of the following table that corresponds to the canvas element's context mode.
2. For context mode 2d, it should follow the steps to set bitmap dimensions to the numeric values of the width and height content attributes.
3. the first step to set bitmap dimensions is to Reset the rendering context to its default state.
4. And imageSmoothingEnabled is a canvas state, and its default state is true.

Although the W3C Specification has defined it. I still wonder why need to do these, reset states when set canvas.width, and especially why need to change the CanvasRenderingContext2D.imageSmoothingEnabled to be true.

Method

1. Use CanvasRenderingContext2D.clearRect() to clear a partial area.
2. Filter the objects(shape or text, etc.) intersected with the partial area.
3. Only re-render the objects filtered by step 2.

Applications of the method

1. antv/g v4. Details refer to the enableDirtyRectangleRendering option of antv/g Renderer and the design doc of G 4.0 的局部渲染(I prefer to call it "局部重绘" in Chinese)

related info:

• CanvasRenderingContext2D.canvas

i.e. when will a canvasRenderingContext2D instance has no associated element?

• Path, is the core way to define shape. Only some frequently used shape provided special APIs, e.g. rect(), arc().
• States. There are some important states in CanvasRenderingContext2D, e.g. the current path, imageSmoothingEnabled .etc.
• Interaction between DOM Element and Canvas Path, e.g. drawFocusIfNeeded().
• APIs with capacity of Mouse Picking, e.g. isPointInPath().
• Styles. Some styles is highly consistent with CSS style properties, e.g. Text styles.
• Compositing methods. e.g. CanvasRenderingContext2D.globalCompositeOperation.

What's the meaning of "Note: To create a new sub-path, i.e., one matching the current canvas state, you can use CanvasRenderingContext2D.moveTo()."?

Context loss can occur due to driver crashes, running out of memory, etc.

Refer to HTML Standard #concept-canvas-context-lost .

the optimizing actions described on MDN