[canvaskit] Expose various canvas features

clipRRect and drawColor

Change-Id: I6e947b4a30646a96935c74e0cd334f1624c41065
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/249892
Reviewed-by: Mike Reed <reed@google.com>

modules/canvaskit/CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - Experimental `CanvasKit.Malloc`, which can be used to create a
    TypedArray backed by the C++ WASM memory. This can save a copy in some cases
    (e.g. SkColorFilter.MakeMatrix). This is an advanced feature, so use it with care.
+ - `SkCanvas.clipRRect`, `SkCanvas.drawColor`
 
 ## [0.8.0] - 2019-10-21
 

modules/canvaskit/canvaskit_bindings.cpp

@@ -812,6 +812,9 @@ EMSCRIPTEN_BINDINGS(Skia) {
         .constructor<>()
         .function("clear", &SkCanvas::clear)
         .function("clipPath", select_overload<void (const SkPath&, SkClipOp, bool)>(&SkCanvas::clipPath))
+        .function("clipRRect",optional_override([](SkCanvas& self, const SimpleRRect& r, SkClipOp op, bool doAntiAlias) {
+            self.clipRRect(toRRect(r), op, doAntiAlias);
+        }))
         .function("clipRect", select_overload<void (const SkRect&, SkClipOp, bool)>(&SkCanvas::clipRect))
         .function("concat", optional_override([](SkCanvas& self, const SimpleMatrix& m) {
             self.concat(toSkMatrix(m));
@@ -831,6 +834,7 @@ EMSCRIPTEN_BINDINGS(Skia) {
             self.drawAtlas(atlas, dstXforms, srcRects, colors, count, mode, nullptr, paint);
         }), allow_raw_pointers())
         .function("drawCircle", select_overload<void (SkScalar, SkScalar, SkScalar, const SkPaint& paint)>(&SkCanvas::drawCircle))
+        .function("drawColor", &SkCanvas::drawColor)
         .function("drawDRRect",optional_override([](SkCanvas& self, const SimpleRRect& o, const SimpleRRect& i, const SkPaint& paint) {
             self.drawDRRect(toRRect(o), toRRect(i), paint);
         }))

modules/canvaskit/externs.js

@@ -129,12 +129,14 @@ var CanvasKit = {
 		// public API (from C++ bindings)
 		clear: function() {},
 		clipPath: function() {},
+		clipRRect: function() {},
 		clipRect: function() {},
 		concat: function() {},
+		drawAnimatedImage: function() {},
 		drawArc: function() {},
 		drawCircle: function() {},
+		drawColor: function() {},
 		drawDRRect:  function() {},
-		drawAnimatedImage: function() {},
 		drawImage: function() {},
 		drawImageRect: function() {},
 		drawLine: function() {},

modules/canvaskit/tests/canvas.spec.js

@@ -284,8 +284,6 @@ describe('CanvasKit\'s Canvas Behavior', function() {
                 return;
             }
             const canvas = surface.getCanvas();
-            const path = starPath(CanvasKit);
-
             const paint = new CanvasKit.SkPaint();
 
             const blue = CanvasKit.SkColorFilter.MakeBlend(
@@ -313,17 +311,13 @@ describe('CanvasKit\'s Canvas Behavior', function() {
             cm = CanvasKit.SkColorMatrix.concat(cm, b);
             CanvasKit.SkColorMatrix.postTranslate(cm, 20, 0, -10, 0);
 
-            console.log(cm);
-
             const mat = CanvasKit.SkColorFilter.MakeMatrix(cm);
-
             const final = CanvasKit.SkColorFilter.MakeCompose(mat, lerp);
 
             paint.setColorFilter(final)
             canvas.drawRect(CanvasKit.LTRBRect(10, 70, 140, 120), paint);
 
             surface.flush();
-            path.delete();
             paint.delete();
             blue.delete();
             red.delete();
@@ -343,8 +337,6 @@ describe('CanvasKit\'s Canvas Behavior', function() {
                 return;
             }
             const canvas = surface.getCanvas();
-            const path = starPath(CanvasKit);
-
             const paint = new CanvasKit.SkPaint();
 
             const src = [
@@ -362,8 +354,7 @@ describe('CanvasKit\'s Canvas Behavior', function() {
             paint.setColorFilter(final)
             canvas.drawRect(CanvasKit.LTRBRect(10, 70, 140, 120), paint);
 
-            surface.flush();
-            path.delete();
+            surface.flush()
             paint.delete();
             final.delete();
 
@@ -371,4 +362,36 @@ describe('CanvasKit\'s Canvas Behavior', function() {
         }));
     });
 
-});
+    it('can clip using rrect and path', function(done) {
+        LoadCanvasKit.then(catchException(done, () => {
+            const surface = CanvasKit.MakeCanvasSurface('test');
+            expect(surface).toBeTruthy('Could not make surface')
+            if (!surface) {
+                done();
+                return;
+            }
+            const canvas = surface.getCanvas();
+            const path = starPath(CanvasKit);
+            const paint = new CanvasKit.SkPaint();
+            paint.setColor(CanvasKit.BLUE);
+            const rrect = CanvasKit.RRectXY(CanvasKit.LTRBRect(300, 300, 500, 500), 40, 40);
+
+            canvas.save();
+            // draw magenta around the outside edge of an rrect.
+            canvas.clipRRect(rrect, CanvasKit.ClipOp.Difference, true);
+            canvas.drawColor(CanvasKit.Color(250, 30, 240, 0.9), CanvasKit.BlendMode.SrcOver);
+            canvas.restore();
+
+            // draw grey inside of a star pattern, then the blue star on top
+            canvas.clipPath(path, CanvasKit.ClipOp.Intersect, false);
+            canvas.drawColor(CanvasKit.Color(200, 200, 200, 1.0), CanvasKit.BlendMode.SrcOver);
+            canvas.drawPath(path, paint);
+
+            surface.flush();
+            path.delete();
+
+            reportSurface(surface, 'clips_canvas', done);
+        }));
+    });
+
+});