skia-canvas - npm Package Compare versions

Comparing version 0.9.28 to 0.9.29

CHANGELOG.md

 # Changelog
 
-<!-- ## 🥚 ⟩ [Unreleased]  -->
+<!-- ## 🥚 ⟩ [Unreleased] -->
 
+## 📦 ⟩ [v0.9.29] ⟩ Feb 7, 2022
+
+### New Features
+- PDF exports now support the optional [`matte`][matte] argument.
+
+### Breaking Changes
+- When the [`drawImage()`][mdn_drawImage] function is passed a **Canvas** object as its image source it will now rasterize the canvas before drawing. The prior behavior (in which it is drawn as a vector graphic) can now be accessed through the new [`drawCanvas()`][drawCanvas] method which supports the same numerical arguments as `drawImage` but requires that its first argument be a **Canvas**.
+
+### Bugfixes
+- Regions erased using [`clearRect()`][mdn_clearRect] are now properly antialiased
+- The [`clip()`][mdn_clip] method now interprets the current translate/scale/rotate state correctly when combining clipping masks
+
+### Misc. Improvements
+- Upgraded Skia to milestone 97
+
+[drawCanvas]: https://github.com/samizdatco/skia-canvas#drawcanvascanvas-x-y-
+[mdn_clip]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
+[mdn_clearRect]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect
+
 ## 📦 ⟩ [v0.9.28] ⟩ Jan 12, 2022
@@ -13,3 +32,3 @@
 ### Breaking Changes
-- The **Canvas** [`.async`](https://github.com/samizdatco/skia-canvas#async) property has been **deprecated** and will be removed in a future release. 
+- The **Canvas** [`.async`](https://github.com/samizdatco/skia-canvas#async) property has been **deprecated** and will be removed in a future release.
   - The `saveAs`, `toBuffer`, and `toDataURL` methods will now be async-only (likewise the [shorthand properties](https://github.com/samizdatco/skia-canvas#pdf-svg-jpg-and-png)).
@@ -33,3 +52,3 @@ - Use their synchronous counterparts (`saveAsSync`, `toBufferSync`, and `toDataURLSync`) if you want to block execution while exporting images.
 ## 📦 ⟩ [v0.9.27] ⟩ Oct 23, 2021
- 
+
 ### New Features
@@ -46,3 +65,3 @@ - Added pre-compiled binaries for Alpine Linux using the [musl](https://musl.libc.org) C library
 - Windows text rendering has been restored after failing due to changes involving the `icudtl.dat` file
-- `FontLibrary.use` now reports an error if the specified font file doesn't exist 
+- `FontLibrary.use` now reports an error if the specified font file doesn't exist
 - Fixed a crash that could result from calling `measureText` with various unicode escapes
@@ -58,3 +77,3 @@
 ### Bugfixes
-- Improved image scaling when a larger image is being shrunk down to a smaller size via [`drawImage()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)
+- Improved image scaling when a larger image is being shrunk down to a smaller size via [`drawImage()`][mdn_drawImage]
 - modified [`imageSmoothingQuality`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality) settings to provide a more meaningful range across `low`, `medium`, and `high`
@@ -67,2 +86,3 @@ - [`measureText()`](https://github.com/samizdatco/skia-canvas#measuretextstr-width) now returns correct metrics regardless of current `textAlign` setting
 
+[mdn_drawImage]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
 
@@ -114,3 +134,3 @@ ## 📦 ⟩ [v0.9.24] ⟩ Aug 18, 2021
 - The `newPage()` and `saveAs()` methods now work in the browser, including the ability to save image sequences to a zip archive. The browser’s canvas is still doing all the drawing however, so file export formats will be limited to PNG and JPEG and none of the other Skia-specific extensions will be available.
-- The file-export methods now accept a [`matte`][matte] value in their options object which can be used to set the background color for any portions of the canvas that were left semi-transparent 
+- The file-export methods now accept a [`matte`][matte] value in their options object which can be used to set the background color for any portions of the canvas that were left semi-transparent
 - Canvas dimensions are no longer rounded-off to integer values (at least until a bitmap needs to be generated for export)
@@ -142,3 +162,3 @@ - Linux builds will now run on some older systems going back to glibc 2.24
 - Rasterization and file i/o are now handled asynchronously in a background thread. See the discussion of Canvas’s new [`async`](https://github.com/samizdatco/skia-canvas#async) property for details.
-- Output files can now be generated at pixel-ratios > 1 for High-DPI screens. `SaveAs` and the other canvas output functions all accept an optional [`density`](https://github.com/samizdatco/skia-canvas#density) argument which is an integer ≥1 and will upscale the image accordingly. The density can also be passed using the `filename` argument by ending the name with an ‘@’ suffix like `[e-mail]`. 
+- Output files can now be generated at pixel-ratios > 1 for High-DPI screens. `SaveAs` and the other canvas output functions all accept an optional [`density`](https://github.com/samizdatco/skia-canvas#density) argument which is an integer ≥1 and will upscale the image accordingly. The density can also be passed using the `filename` argument by ending the name with an ‘@’ suffix like `[e-mail]`.
 - SVG exports can optionally convert text to paths by setting the [`outline`](https://github.com/samizdatco/skia-canvas#outline) argument to `true`.
@@ -192,3 +212,4 @@
 
-[unreleased]: https://github.com/samizdatco/skia-canvas/compare/v0.9.28...HEAD
+[unreleased]: https://github.com/samizdatco/skia-canvas/compare/v0.9.29...HEAD
+[v0.9.29]: https://github.com/samizdatco/skia-canvas/compare/v0.9.28...v0.9.29
 [v0.9.28]: https://github.com/samizdatco/skia-canvas/compare/v0.9.27...v0.9.28
@@ -195,0 +216,0 @@ [v0.9.27]: https://github.com/samizdatco/skia-canvas/compare/v0.9.26...v0.9.27

lib/index.d.ts

@@ -102,2 +102,5 @@ /// <reference lib="dom"/>
   drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
+  drawCanvas(image: Canvas, dx: number, dy: number): void;
+  drawCanvas(image: Canvas, dx: number, dy: number, dw: number, dh: number): void;
+  drawCanvas(image: Canvas, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
 }
@@ -104,0 +107,0 @@

lib/index.js

@@ -415,5 +415,5 @@ "use strict"
     if (image instanceof Canvas){
-      this.ƒ('drawCanvas', core(image.getContext('2d')), ...coords)
+      this.ƒ('drawImage', core(image.getContext('2d')), ...coords)
     }else if (image instanceof Image){
-      this.ƒ('drawRaster', core(image), ...coords)
+      this.ƒ('drawImage', core(image), ...coords)
     }else{
@@ -424,2 +424,10 @@ throw new Error("Expected an Image or a Canvas argument")
 
+  drawCanvas(image, ...coords){
+    if (image instanceof Canvas){
+      this.ƒ('drawCanvas', core(image.getContext('2d')), ...coords)
+    }else{
+      this.drawImage(image, ...coords)
+    }
+  }
+
   // -- typography ------------------------------------------------------------
@@ -426,0 +434,0 @@ get font(){         return this.prop('font') }

package.json

 {
   "name": "skia-canvas",
-  "version": "0.9.28",
+  "version": "0.9.29",
   "description": "A canvas environment for Node",
@@ -32,3 +32,3 @@ "author": "Christian Swinehart <[e-mail]>",
     "path-browserify": "^1.0.1",
-    "simple-get": "^4.0.0",
+    "simple-get": "^4.0.1",
     "string-split-by": "^1.0.0"
@@ -38,6 +38,6 @@ },
     "@types/jest": "^27.4.0",
-    "@types/node": "^17.0.8",
-    "aws-sdk": "^2.1053.0",
+    "@types/node": "^17.0.15",
+    "aws-sdk": "^2.1069.0",
     "express": "^4.17.2",
-    "jest": "^27.4.7",
+    "jest": "^27.5.0",
     "lodash": "^4.17.21",
@@ -44,0 +44,0 @@ "nodemon": "^2.0.15",

README.md

@@ -290,45 +290,15 @@ # Skia Canvas
 
+| Canvas State                                  | Drawing                                           | Pattern & Color                                   | Line Style                                   | Transform                                        | Bezier Paths                             | Typography                                                       | Images                                             | Compositing Effects                                      |
+|-----------------------------------------------|---------------------------------------------------|---------------------------------------------------|----------------------------------------------|--------------------------------------------------|------------------------------------------|------------------------------------------------------------------|----------------------------------------------------|----------------------------------------------------------|
+| [**canvas**][canvas_attr] ⧸[⚡](#canvas) | [clearRect()][clearRect()]                        | [**fillStyle**][fillStyle]                        | [**lineCap**][lineCap]                       | [**currentTransform**][currentTransform]         | [moveTo()][moveTo()]                     | [**direction**][direction]                                       | [**imageSmoothingEnabled**][imageSmoothingEnabled] | [**filter**][filter]                                     |
+| [beginPath()][beginPath()]                    | [fillRect()][fillRect()]                          | [**strokeStyle**][strokeStyle]                    | [**lineDashFit** ⚡][lineDashFit]       | [createProjection() ⚡][createProjection()] | [lineTo()][lineTo()]                     | [**font**][font] ⧸[⚡](#font)                               | [**imageSmoothingQuality**][imageSmoothingQuality] | [**globalAlpha**][globalAlpha]                           |
+| [isPointInPath()][isPointInPath()]            | [strokeRect()][strokeRect()]                      | [createConicGradient()][createConicGradient()]    | [**lineDashMarker** ⚡][lineDashMarker] | [getTransform()][getTransform()]                 | [arcTo()][arcTo()]                       | [**fontVariant** ⚡](#fontvariant)                          | [createImageData()][createImageData()]             | [**globalCompositeOperation**][globalCompositeOperation] |
+| [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) |                                                    |                                                          |
+|                                               |                                                   |                                                   | [setLineDash()][setLineDash()]               | [scale()][scale()]                               | [ellipse()][ellipse()]                   | [outlineText() ⚡][outlineText()]                           |                                                    |                                                          |
+|                                               |                                                   |                                                   |                                              |                                                  | [rect()][rect()]                         |                                                                  |                                                    |
 
-| Canvas State                             | Drawing                                      | Pattern & Color                                   | Line Style                              | Transform                                   |
-|------------------------------------------|----------------------------------------------|---------------------------------------------------|-----------------------------------------|---------------------------------------------|
-| [**canvas**][canvas_attr] ⧸[⚡](#canvas) | [clearRect()][clearRect()]                   | [**fillStyle**][fillStyle]                        | [**lineCap**][lineCap]                  | [**currentTransform**][currentTransform]    |
-| [beginPath()][beginPath()]               | [fillRect()][fillRect()]                     | [**strokeStyle**][strokeStyle]                    | [**lineDashFit** ⚡][lineDashFit]       | [createProjection() ⚡][createProjection()] |
-| [isPointInPath()][isPointInPath()]       | [strokeRect()][strokeRect()]                 | [createConicGradient()][createConicGradient()]    | [**lineDashMarker** ⚡][lineDashMarker] | [getTransform()][getTransform()]            |
-| [isPointInStroke()][isPointInStroke()]   | [fillText()][fillText()] ⧸[⚡][drawText]     | [createLinearGradient()][createLinearGradient()]  | [**lineDashOffset**][lineDashOffset]    | [setTransform()][setTransform()]            |
-| [save()][save()]                         | [strokeText()][strokeText()] ⧸[⚡][drawText] | [createRadialGradient()][createRadialGradient()]  | [**lineJoin**][lineJoin]                | [resetTransform()][resetTransform()]        |
-| [restore()][restore()]                   | [fill()][fill()]                             | [createPattern()][createPattern()]                | [**lineWidth**][lineWidth]              | [transform()][transform()]                  |
-| [clip()][clip()]                         | [stroke()][stroke()]                         | [createTexture() ⚡][createTexture()]             | [**miterLimit**][miterLimit]            | [translate()][translate()]                  |
-|                                          |                                              |                                                   | [getLineDash()][getLineDash()]          | [rotate()][rotate()]                        |
-|                                          |                                              |                                                   | [setLineDash()][setLineDash()]          | [scale()][scale()]                          |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-| Bezier Paths                             | Typography                                                  | Images                                             | Compositing Effects                                      |
-|------------------------------------------|-------------------------------------------------------------|----------------------------------------------------|----------------------------------------------------------|
-| [moveTo()][moveTo()]                     | [**direction**][direction]                                  | [**imageSmoothingEnabled**][imageSmoothingEnabled] | [**filter**][filter]                                     |
-| [lineTo()][lineTo()]                     | [**font**][font] ⧸[⚡](#font)                               | [**imageSmoothingQuality**][imageSmoothingQuality] | [**globalAlpha**][globalAlpha]                           |
-| [arcTo()][arcTo()]                       | [**fontVariant** ⚡](#fontvariant)                          | [createImageData()][createImageData()]             | [**globalCompositeOperation**][globalCompositeOperation] |
-| [bezierCurveTo()][bezierCurveTo()]       | [**textAlign**][textAlign]                                  | [getImageData()][getImageData()]                   | [**shadowBlur**][shadowBlur]                             |
-| [conicCurveTo() ⚡][conicCurveTo]        | [**textBaseline**][textBaseline]                            | [putImageData()][putImageData()]                   | [**shadowColor**][shadowColor]                           |
-| [quadraticCurveTo()][quadraticCurveTo()] | [**textTracking** ⚡](#texttracking)                        | [drawImage()][drawImage()]                         | [**shadowOffsetX**][shadowOffsetX]                       |
-| [closePath()][closePath()]               | [**textWrap** ⚡](#textwrap)                                |                                                    | [**shadowOffsetY**][shadowOffsetY]                       |
-| [arc()][arc()]                           | [measureText()][measureText()] ⧸[⚡](#measuretextstr-width) |                                                    |                                                          |
-| [ellipse()][ellipse()]                   | [outlineText() ⚡][outlineText()]                           |                                                    |                                                          |
-| [rect()][rect()]                         |                                                             |                                                    |
-
-
 ##### PROPERTIES
@@ -509,3 +479,18 @@
 
+#### `drawCanvas(canvas, x, y, …)`
+This method behaves identically to the standard [`drawImage()`][drawImage()] function with one key difference: if the first argument is a canvas, it will not be converted to a bitmap before being drawn. Instead its contents will be added to the canvas as resolution-independent vector graphics. This is especially useful when scaling or rotating since it preserves the fidelity of text, patterns, and gradients from the source canvas.
 
+```js
+let src = new Canvas(10, 10),
+    srcCtx = src.getContext("2d");
+srcCtx.font = 'italic 10px Times'
+srcCtx.fillText('¶', 2, 8)
+
+let dst = new Canvas(350, 150),
+    dstCtx = dst.getContext("2d");
+dstCtx.drawImage(src, 0, 0, 150, 150)
+dstCtx.drawCanvas(src, 200, 0, 150, 150)
+```
+![drawCanvas preserves resolution-independence](/test/assets/image/[e-mail])
+
 #### `fillText(str, x, y, [width])` & `strokeText(str, x, y, [width])`
@@ -512,0 +497,0 @@

No alert changes

Improved metrics

Total package byte prevSize

157249

increased by1.91%

Lines of code

2027

increased by0.5%

Worsened metrics

Number of lines in readme file

993

decreased by-1.49%

Dependency changes

• Updatedsimple-get@^4.0.1