[canvaskit] Expose MakeRasterDirectSurface

This will let clients have faster access to the drawn data
and give them control about calling Canvas2D.putImageData.

Bug: skia:10565
Change-Id: Ia3da7867be3f671ab20fdb182ec758b77c0f63b8
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/331316
Reviewed-by: Mike Reed <reed@google.com>
Reviewed-by: Nathaniel Nifong <nifong@google.com>

Author: kjlubick

modules/canvaskit/CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Added
  - `MakeFractalNoise`, `MakeImprovedNoise`, and `MakeTurbulence` have been added to
    `CanvasKit.Shader`.
+ - `MakeRasterDirectSurface` for giving the user direct access to drawn pixels.
 
 ### Breaking
  - `CanvasKit.MakePathFromSVGString` was renamed to `CanvasKit.Path.MakeFromSVGString`

modules/canvaskit/canvaskit/types/canvaskit-wasm-tests.ts

@@ -773,6 +773,14 @@ function surfaceTests(CK: CanvasKit) {
         enableExtensionsByDefault: 2,
     })!;
     const surfaceSeven = CK.MakeSurface(200, 200)!; // $ExpectType Surface
+    const m = CK.Malloc(Uint8Array, 5 * 5 * 4);
+    const surfaceEight = CK.MakeRasterDirectSurface({
+        width: 5,
+        height: 5,
+        colorType: CK.ColorType.RGBA_8888,
+        alphaType: CK.AlphaType.Premul,
+        colorSpace: CK.ColorSpace.SRGB,
+    }, m, 20);
 
     surfaceOne.flush();
     const canvas = surfaceTwo.getCanvas(); // $ExpectType Canvas
@@ -789,7 +797,7 @@ function surfaceTests(CK: CanvasKit) {
 
     const ctx = CK.GetWebGLContext(canvasEl); // $ExpectType number
     const grCtx = CK.MakeGrContext(ctx);
-    const surfaceEight = CK.MakeOnScreenGLSurface(grCtx, 100, 400, // $ExpectType Surface
+    const surfaceNine = CK.MakeOnScreenGLSurface(grCtx, 100, 400, // $ExpectType Surface
         CK.ColorSpace.ADOBE_RGB)!;
 
     const rt = CK.MakeRenderTarget(grCtx, 100, 200); // $ExpectType Surface | null

modules/canvaskit/canvaskit/types/index.d.ts

@@ -167,6 +167,19 @@ export interface CanvasKit {
      */
     MakeCanvasSurface(canvas: HTMLCanvasElement | string): Surface | null;
 
+    /**
+     * Creates a Raster (CPU) Surface that will draw into the provided Malloc'd buffer. This allows
+     * clients to efficiently be able to read the current pixels w/o having to copy.
+     * The length of pixels must be at least height * bytesPerRow bytes big.
+     * @param ii
+     * @param pixels
+     * @param bytesPerRow - How many bytes are per row. This is at least width * bytesPerColorType. For example,
+     *                      an 8888 ColorType has 4 bytes per pixel, so a 5 pixel wide 8888 surface needs at least
+     *                      5 * 4 = 20 bytesPerRow. Some clients may have more than the usual to make the data line
+     *                      up with a particular multiple.
+     */
+    MakeRasterDirectSurface(ii: ImageInfo, pixels: MallocObj, bytesPerRow: number): Surface | null;
+
     /**
      * Creates a CPU backed (aka raster) surface.
      * @param canvas - either the canvas element itself or a string with the DOM id of it.

modules/canvaskit/cpu.js

@@ -48,6 +48,7 @@
       // Allocate the buffer of pixels to be drawn into.
       var pixelPtr = CanvasKit._malloc(pixelLen);
 
+      // TODO(kjlubick) don't use RDS, as it will always copy if snapping off an SkImage.
       var surface = this._getRasterDirectSurface(imageInfo, pixelPtr, width*4);
       if (surface) {
         surface._canvas = null;
@@ -63,6 +64,10 @@
       return surface;
     };
 
+    CanvasKit.MakeRasterDirectSurface = function(imageInfo, mallocObj, bytesPerRow) {
+      return this._getRasterDirectSurface(imageInfo, mallocObj['byteOffset'], bytesPerRow);
+    };
+
     // For GPU builds, simply proxies to native code flush.  For CPU builds,
     // also updates the underlying HTML canvas, optionally with dirtyRect.
     CanvasKit.Surface.prototype.flush = function(dirtyRect) {

modules/canvaskit/externs.js

@@ -55,6 +55,7 @@ var CanvasKit = {
   MakeParticles: function() {},
   MakeVertices: function() {},
   MakeSurface: function() {},
+  MakeRasterDirectSurface: function() {},
   MakeWebGLCanvasSurface: function() {},
   Malloc: function() {},
   MallocGlyphIDs: function() {},

modules/canvaskit/tests/core.spec.js

@@ -882,7 +882,7 @@ describe('Core canvas behavior', () => {
             const colorSpace = CanvasKit.ColorSpace.SRGB;
             const surface = CanvasKit.MakeCanvasSurface('test', CanvasKit.ColorSpace.SRGB);
             expect(surface).toBeTruthy('Could not make surface');
-            let info = surface.imageInfo()
+            let info = surface.imageInfo();
             expect(info.alphaType).toEqual(CanvasKit.AlphaType.Unpremul);
             expect(info.colorType).toEqual(CanvasKit.ColorType.RGBA_8888);
             expect(CanvasKit.ColorSpace.Equals(info.colorSpace, colorSpace))
@@ -900,7 +900,7 @@ describe('Core canvas behavior', () => {
                 console.log('Not expecting color space support in cpu backed suface.');
                 return;
             }
-            let info = surface.imageInfo()
+            let info = surface.imageInfo();
             expect(info.alphaType).toEqual(CanvasKit.AlphaType.Unpremul);
             expect(info.colorType).toEqual(CanvasKit.ColorType.RGBA_F16);
             expect(CanvasKit.ColorSpace.Equals(info.colorSpace, colorSpace))
@@ -918,7 +918,7 @@ describe('Core canvas behavior', () => {
                 console.log('Not expecting color space support in cpu backed suface.');
                 return;
             }
-            let info = surface.imageInfo()
+            let info = surface.imageInfo();
             expect(info.alphaType).toEqual(CanvasKit.AlphaType.Unpremul);
             expect(info.colorType).toEqual(CanvasKit.ColorType.RGBA_F16);
             expect(CanvasKit.ColorSpace.Equals(info.colorSpace, colorSpace))
@@ -1036,4 +1036,26 @@ describe('Core canvas behavior', () => {
             expect(expected[i]).toBeCloseTo(actual[i], 5, `element ${i}`);
         }
     }
+
+    it('can create a RasterDirectSurface', () => {
+        // Make enough space for a 5x5 8888 surface (4 bytes for R, G, B, A)
+        const rdsData = CanvasKit.Malloc(Uint8Array, 5 * 5 * 4);
+        const surface = CanvasKit.MakeRasterDirectSurface({
+            'width': 5,
+            'height': 5,
+            'colorType': CanvasKit.ColorType.RGBA_8888,
+            'alphaType': CanvasKit.AlphaType.Premul,
+            'colorSpace': CanvasKit.ColorSpace.SRGB,
+        }, rdsData, 5 * 4);
+
+        surface.getCanvas().clear(CanvasKit.Color(200, 100, 0, 0.8));
+        const pixels = rdsData.toTypedArray();
+        // Check that the first pixels colors are right.
+        expect(pixels[0]).toEqual(160); // red (premul, 0.8 * 200)
+        expect(pixels[1]).toEqual(80); // green (premul, 0.8 * 100)
+        expect(pixels[2]).toEqual(0); // blue (premul, not that it matters)
+        expect(pixels[3]).toEqual(204); // alpha (0.8 * 255)
+        surface.delete();
+        CanvasKit.Free(rdsData);
+    });
 });