add reset() method to context

- it erases the canvas, resets the transform, and clears the current path

Author: samizdatco

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### New Features
 - The new [Window][window] class can display a **Canvas** on screen, respond to mouse and keyboard input, and fluidly [animate][window_anim] by calling user-defined [event handlers][window_events].
 - Bitmap rendering now occurs on the GPU by default and can be configured using the **Canvas**'s [`.gpu`][canvas_gpu] property. If the platform supports hardware-accelerated rendering (using Metal on macOS and Vulkan on Linux & Windows), the property will be `true` by default and can be set to `false` to use the software renderer.
+- Added support for Chrome’s [`reset()`][chrome_reset] context method which erases the canvas, resets the transformation state, and clears the current path
 
 ### Bugfixes
 - The `FontLibrary.reset()` method didn't actually remove previously installed fonts that had already been drawn with (and thus cached). It now clears those caches, which also means previously used fonts can now be replaced by calling `.use()` again with the same family name.
@@ -21,6 +22,7 @@
 [window_events]: https://github.com/samizdatco/skia-canvas#on--off--once
 [canvas_gpu]: https://github.com/samizdatco/skia-canvas#gpu
 [filter]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
+[chrome_reset]: https://developer.chrome.com/blog/canvas2d/#context-reset
 
 ## 📦 ⟩ [v0.9.30] ⟩ Jun 7, 2022
 

README.md

@@ -342,8 +342,8 @@ Most of your interaction with the canvas will actually be directed toward its 
 | [isPointInStroke()][isPointInStroke()]        | [fillText()][fillText()] ⧸[⚡][drawText]     | [createLinearGradient()][createLinearGradient()]  | [**lineDashOffset**][lineDashOffset]         | [setTransform()][setTransform()]                 | [bezierCurveTo()][bezierCurveTo()]       | [**textAlign**][textAlign]                                       | [getImageData()][getImageData()]                   | [**shadowBlur**][shadowBlur]                             |
 | [save()][save()]                              | [strokeText()][strokeText()] ⧸[⚡][drawText] | [createRadialGradient()][createRadialGradient()]  | [**lineJoin**][lineJoin]                     | [resetTransform()][resetTransform()]             | [conicCurveTo() ⚡][conicCurveTo]   | [**textBaseline**][textBaseline]                                 | [putImageData()][putImageData()]                   | [**shadowColor**][shadowColor]                           |
 | [restore()][restore()]                        | [fill()][fill()]                                  | [createPattern()][createPattern()]                | [**lineWidth**][lineWidth]                   | [transform()][transform()]                       | [quadraticCurveTo()][quadraticCurveTo()] | [**textTracking** ⚡](#texttracking)                        | [drawCanvas() ⚡](#drawcanvascanvas-x-y-)     | [**shadowOffsetX**][shadowOffsetX]                       |
-| [clip()][clip()]                              | [stroke()][stroke()]                              | [createTexture() ⚡][createTexture()]        | [**miterLimit**][miterLimit]                 | [translate()][translate()]                       | [closePath()][closePath()]               | [**textWrap** ⚡](#textwrap)                                | [drawImage()][drawImage()]                         | [**shadowOffsetY**][shadowOffsetY]                       |
-|                                               |                                                   |                                                   | [getLineDash()][getLineDash()]               | [rotate()][rotate()]                             | [arc()][arc()]                           | [measureText()][measureText()] ⧸[⚡](#measuretextstr-width) |                                                    |                                                          |
+| [reset()][reset()]                            | [stroke()][stroke()]                              | [createTexture() ⚡][createTexture()]        | [**miterLimit**][miterLimit]                 | [translate()][translate()]                       | [closePath()][closePath()]               | [**textWrap** ⚡](#textwrap)                                | [drawImage()][drawImage()]                         | [**shadowOffsetY**][shadowOffsetY]                       |
+| [clip()][clip()]                              |                                                   |                                                   | [getLineDash()][getLineDash()]               | [rotate()][rotate()]                             | [arc()][arc()]                           | [measureText()][measureText()] ⧸[⚡](#measuretextstr-width) |                                                    |                                                          |
 |                                               |                                                   |                                                   | [setLineDash()][setLineDash()]               | [scale()][scale()]                               | [ellipse()][ellipse()]                   | [outlineText() ⚡][outlineText()]                           |                                                    |                                                          |
 |                                               |                                                   |                                                   |                                              |                                                  | [rect()][rect()]                         |                                                                  |                                                    |
 
@@ -1361,6 +1361,7 @@ Many thanks to the [`node-canvas`](https://github.com/Automattic/node-canvas) de
 [strokeText()]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeText
 [transform()]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
 [translate()]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate
+[reset()]: https://developer.chrome.com/blog/canvas2d/#context-reset
 
 [nonzero]: https://en.wikipedia.org/wiki/Nonzero-rule
 [evenodd]: https://en.wikipedia.org/wiki/Even–odd_rule

lib/index.d.ts

@@ -139,6 +139,8 @@ export interface CanvasRenderingContext2D extends CanvasCompositing, CanvasDrawI
   strokeText(text: string, x: number, y:number, maxWidth?: number): void
   measureText(text: string, maxWidth?: number): TextMetrics
   outlineText(text: string): Path2D
+
+  reset(): void
 }
 
 //

lib/index.js

@@ -567,6 +567,9 @@ class CanvasRenderingContext2D extends RustClass{
 
   get canvas(){ return this.#canvas.deref() }
 
+  // -- global state & content reset ------------------------------------------
+  reset(){ this.ƒ('reset') }
+
   // -- grid state ------------------------------------------------------------
   save(){ this.ƒ('save') }
   restore(){ this.ƒ('restore') }

src/context/api.rs

@@ -64,6 +64,15 @@ pub fn set_size(mut cx: FunctionContext) -> JsResult<JsUndefined> {
   Ok(cx.undefined())
 }
 
+pub fn reset(mut cx: FunctionContext) -> JsResult<JsUndefined> {
+  let this = cx.argument::<BoxedContext2D>(0)?;
+  let mut this = this.borrow_mut();
+  let size = this.bounds.size();
+
+  this.reset_size(size);
+  Ok(cx.undefined())
+}
+
 //
 // Grid State
 //

src/lib.rs

@@ -119,6 +119,7 @@ fn main(mut cx: ModuleContext) -> NeonResult<()> {
   cx.export_function("CanvasRenderingContext2D_resetSize", ctx::resetSize)?;
   cx.export_function("CanvasRenderingContext2D_get_size", ctx::get_size)?;
   cx.export_function("CanvasRenderingContext2D_set_size", ctx::set_size)?;
+  cx.export_function("CanvasRenderingContext2D_reset", ctx::reset)?;
 
   // grid state
   cx.export_function("CanvasRenderingContext2D_save", ctx::save)?;

test/context2d.test.js

@@ -752,7 +752,28 @@ describe("Context2D", ()=>{
       expect( () => ctx.drawCanvas(image, 0, 0) ).not.toThrow()
     })
 
+    test('reset()', async () => {
+      ctx.fillStyle = 'green'
+      ctx.scale(2, 2)
+      ctx.translate(0, -HEIGHT/4)
+
+      ctx.fillRect(WIDTH/4, HEIGHT/4, WIDTH/8, HEIGHT/8)
+      expect(pixel(WIDTH * .5 + 1, 0)).toEqual(GREEN)
+      expect(pixel(WIDTH * .75 - 1, 0)).toEqual(GREEN)
 
+      ctx.beginPath()
+      ctx.rect(WIDTH/4, HEIGHT/2, 100, 100)
+      ctx.reset()
+      ctx.fill()
+      expect(pixel(WIDTH/2 + 1, HEIGHT/2 + 1)).toEqual(CLEAR)
+      expect(pixel(WIDTH * .5 + 1, 0)).toEqual(CLEAR)
+      expect(pixel(WIDTH * .75 - 1, 0)).toEqual(CLEAR)
+
+      ctx.globalAlpha = 0.4
+      ctx.reset()
+      ctx.fillRect(WIDTH/2, HEIGHT/2, 3, 3)
+      expect(pixel(WIDTH/2 + 1, HEIGHT/2 + 1)).toEqual(BLACK)
+    })
   })