fix(🐛): Fix opacity context bug where color opacity would mutate the context opacity (#3171)

Author: wcandillon

apps/docs/static/img/paint/opaque-circle.png

@@ -2162,77 +2162,77 @@ SPEC CHECKSUMS:
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: eb93e2f488219332457c3c4eafd2738ddc7e80b8
   hermes-engine: b417d2b2aee3b89b58e63e23a51e02be91dc876d
-  RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
+  RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
   RCTDeprecation: b2eecf2d60216df56bc5e6be5f063826d3c1ee35
   RCTRequired: 78522de7dc73b81f3ed7890d145fa341f5bb32ea
   RCTTypeSafety: c135dd2bf50402d87fd12884cbad5d5e64850edd
   React: b229c49ed5898dab46d60f61ed5a0bfa2ee2fadb
   React-callinvoker: 2ac508e92c8bd9cf834cc7d7787d94352e4af58f
-  React-Core: 325b4f6d9162ae8b9a6ff42fe78e260eb124180d
-  React-CoreModules: 558041e5258f70cd1092f82778d07b8b2ff01897
-  React-cxxreact: 8fff17cbe76e6a8f9991b59552e1235429f9c74b
+  React-Core: 13cdd1558d0b3f6d9d5a22e14d89150280e79f02
+  React-CoreModules: b07a6744f48305405e67c845ebf481b6551b712a
+  React-cxxreact: 1055a86c66ac35b4e80bd5fb766aed5f494dfff4
   React-debug: 0a5fcdbacc6becba0521e910c1bcfdb20f32a3f6
-  React-defaultsnativemodule: 618dc50a0fad41b489997c3eb7aba3a74479fd14
-  React-domnativemodule: 7ba599afb6c2a7ec3eb6450153e2efe0b8747e9a
-  React-Fabric: 252112089d2c63308f4cbfade4010b6606db67d1
-  React-FabricComponents: 3c0f75321680d14d124438ab279c64ec2a3d13c4
-  React-FabricImage: 728b8061cdec2857ca885fd605ee03ad43ffca98
+  React-defaultsnativemodule: 4bb28fc97fee5be63a9ebf8f7a435cfe8ba69459
+  React-domnativemodule: b36a11c2597243d7563985028c51ece988d8ae33
+  React-Fabric: afc561718f25b2cd800b709d934101afe376a12c
+  React-FabricComponents: f4e0a4e18a27bf6d39cbf2a0b42f37a92fa4e37f
+  React-FabricImage: 37d8e8b672eda68a19d71143eb65148084efb325
   React-featureflags: 19682e02ef5861d96b992af16a19109c3dfc1200
-  React-featureflagsnativemodule: 23528c7e7d50782b7ef0804168ba40bbaf1e86ab
-  React-graphics: fefe48f71bfe6f48fd037f59e8277b12e91b6be1
-  React-hermes: a9a0c8377627b5506ef9a7b6f60a805c306e3f51
-  React-idlecallbacksnativemodule: 7e2b6a3b70e042f89cd91dbd73c479bb39a72a7e
-  React-ImageManager: e3300996ac2e2914bf821f71e2f2c92ae6e62ae2
-  React-jserrorhandler: fa75876c662e5d7e79d6efc763fc9f4c88e26986
-  React-jsi: f3f51595cc4c089037b536368f016d4742bf9cf7
-  React-jsiexecutor: cca6c232db461e2fd213a11e9364cfa6fdaa20eb
-  React-jsinspector: 2bd4c9fddf189d6ec2abf4948461060502582bef
-  React-jsinspectortracing: a417d8a0ad481edaa415734b4dac81e3e5ee7dc6
-  React-jsitracing: 1ff7172c5b0522cbf6c98d82bdbb160e49b5804e
-  React-logger: 018826bfd51b9f18e87f67db1590bc510ad20664
-  React-Mapbuffer: 3c11cee7737609275c7b66bd0b1de475f094cedf
-  React-microtasksnativemodule: 843f352b32aacbe13a9c750190d34df44c3e6c2c
-  react-native-safe-area-context: 0f14bce545abcdfbff79ce2e3c78c109f0be283e
-  react-native-skia: 87d730aeeb02c54280ad5e42b443cc110a2e43ce
-  react-native-slider: bb7eb4732940fab78217e1c096bb647d8b0d1cf3
-  React-NativeModulesApple: 88433b6946778bea9c153e27b671de15411bf225
-  React-perflogger: 9e8d3c0dc0194eb932162812a168aa5dc662f418
-  React-performancetimeline: 5a2d6efef52bdcefac079c7baa30934978acd023
+  React-featureflagsnativemodule: d7cddf6d907b4e5ab84f9e744b7e88461656e48c
+  React-graphics: b0f78580cdaf5800d25437e3d41cc6c3d83b7aea
+  React-hermes: 71186f872c932e4574d5feb3ed754dda63a0b3bd
+  React-idlecallbacksnativemodule: dd2af19cdd3bc55149d17a2409ed72b694dfbe9c
+  React-ImageManager: a77dde8d5aa6a2b6962c702bf3a47695ef0aa32b
+  React-jserrorhandler: 9c14e89f12d5904257a79aaf84a70cd2e5ac07ba
+  React-jsi: 0775a66820496769ad83e629f0f5cce621a57fc7
+  React-jsiexecutor: 2cf5ba481386803f3c88b85c63fa102cba5d769e
+  React-jsinspector: 8052d532bb7a98b6e021755674659802fb140cc5
+  React-jsinspectortracing: bdd8fd0adcb4813663562e7874c5842449df6d8a
+  React-jsitracing: 2bab3bf55de3d04baf205def375fa6643c47c794
+  React-logger: 795cd5055782db394f187f9db0477d4b25b44291
+  React-Mapbuffer: 0502faf46cab8fb89cfc7bf3e6c6109b6ef9b5de
+  React-microtasksnativemodule: 663bc64e3a96c5fc91081923ae7481adc1359a78
+  react-native-safe-area-context: 286b3e7b5589795bb85ffc38faf4c0706c48a092
+  react-native-skia: 86f943730f6a64eea42fcebc02a9d9040370ce57
+  react-native-slider: e7f302c8d3296ddb49c642473f77f8f98809d53b
+  React-NativeModulesApple: 16fbd5b040ff6c492dacc361d49e63cba7a6a7a1
+  React-perflogger: ab51b7592532a0ea45bf6eed7e6cae14a368b678
+  React-performancetimeline: bc2e48198ec814d578ac8401f65d78a574358203
   React-RCTActionSheet: 592674cf61142497e0e820688f5a696e41bf16dd
-  React-RCTAnimation: e6d669872f9b3b4ab9527aab283b7c49283236b7
-  React-RCTAppDelegate: de2343fe08be4c945d57e0ecce44afcc7dd8fc03
-  React-RCTBlob: 3e2dce94c56218becc4b32b627fc2293149f798d
-  React-RCTFabric: cac2c033381d79a5956e08550b0220cb2d78ea93
-  React-RCTFBReactNativeSpec: d10ca5e0ccbfeac8c047361fedf8e4ac653887b6
-  React-RCTImage: dc04b176c022d12a8f55ae7a7279b1e091066ae0
-  React-RCTLinking: 88f5e37fe4f26fbc80791aa2a5f01baf9b9a3fd5
-  React-RCTNetwork: f213693565efbd698b8e9c18d700a514b49c0c8e
-  React-RCTSettings: a2d32a90c45a3575568cad850abc45924999b8a5
-  React-RCTText: 54cdcd1cbf6f6a91dc6317f5d2c2b7fc3f6bf7a0
-  React-RCTVibration: 11dae0e7f577b5807bb7d31e2e881eb46f854fd4
+  React-RCTAnimation: 8fbb8dba757b49c78f4db403133ab6399a4ce952
+  React-RCTAppDelegate: 7f88baa8cb4e5d6c38bb4d84339925c70c9ac864
+  React-RCTBlob: f89b162d0fe6b570a18e755eb16cbe356d3c6d17
+  React-RCTFabric: 8ad6d875abe6e87312cef90e4b15ef7f6bed72e6
+  React-RCTFBReactNativeSpec: 8c29630c2f379c729300e4c1e540f3d1b78d1936
+  React-RCTImage: ccac9969940f170503857733f9a5f63578e106e1
+  React-RCTLinking: d82427bbf18415a3732105383dff119131cadd90
+  React-RCTNetwork: 12ad4d0fbde939e00251ca5ca890da2e6825cc3c
+  React-RCTSettings: e7865bf9f455abf427da349c855f8644b5c39afa
+  React-RCTText: 2cdfd88745059ec3202a0842ea75a956c7d6f27d
+  React-RCTVibration: a3a1458e6230dfd64b3768ebc0a4aac430d9d508
   React-rendererconsistency: 64e897e00d2568fd8dfe31e2496f80e85c0aaad1
-  React-rendererdebug: 41ce452460c44bba715d9e41d5493a96de277764
+  React-rendererdebug: a3f6d3ae7d2fa0035885026756281c07ee32479e
   React-rncore: 58748c2aa445f56b99e5118dad0aedb51c40ce9f
-  React-RuntimeApple: 7785ed0d8ae54da65a88736bb63ca97608a6d933
-  React-RuntimeCore: 6029ea70bc77f98cfd43ebe69217f14e93ba1f12
+  React-RuntimeApple: f0fda7bacabd32daa099cfda8f07466c30acd149
+  React-RuntimeCore: 683ee0b6a76d4b4bf6fbf83a541895b4887cc636
   React-runtimeexecutor: a188df372373baf5066e6e229177836488799f80
-  React-RuntimeHermes: a264609c28b796edfffc8ae4cb8fad1773ab948b
-  React-runtimescheduler: 23ec3a1e0fb1ec752d1a9c1fb15258c30bfc7222
+  React-RuntimeHermes: 907c8e9bec13ea6466b94828c088c24590d4d0b6
+  React-runtimescheduler: a2e2a39125dd6426b5d8b773f689d660cd7c5f60
   React-timing: bb220a53a795ed57976a4855c521f3de2f298fe5
-  React-utils: 3b054aaebe658fc710a8d239d0e4b9fd3e0b78f9
-  ReactAppDependencyProvider: a1fb08dfdc7ebc387b2e54cfc9decd283ed821d8
-  ReactCodegen: e232f8db3a40721044ec81b9388f95a7afaad36a
-  ReactCommon: 0c097b53f03d6bf166edbcd0915da32f3015dd90
-  ReactNativeHost: f9584a700dc379cfa223203d0d51e492df84a7a8
-  ReactTestApp-DevSupport: 16672810b0675a3bab6be3b3e85f1ce4b93144da
+  React-utils: 300d8bbb6555dcffaca71e7a0663201b5c7edbbc
+  ReactAppDependencyProvider: f2e81d80afd71a8058589e19d8a134243fa53f17
+  ReactCodegen: 50b6e45bbbef9b39d9798820cdbe87bfc7922e22
+  ReactCommon: 3d39389f8e2a2157d5c999f8fba57bd1c8f226f0
+  ReactNativeHost: f2ecc49200441384efb6c6e8bffe62ba29ee16ae
+  ReactTestApp-DevSupport: 15d2ef4884e8f5fd30ded3dec59b010f76384f37
   ReactTestApp-Resources: 1bd9ff10e4c24f2ad87101a32023721ae923bccf
-  RNGestureHandler: dcb1b1db024f3744b03af56d132f4f72c4c27195
-  RNReanimated: 3b2312c84f8c747ab1e9d9c3ce879e93a5ba96f3
-  RNScreens: 790123c4a28783d80a342ce42e8c7381bed62db1
-  RNSVG: 8126581b369adf6a0004b6a6cab1a55e3002d5b0
+  RNGestureHandler: 66e593addd8952725107cfaa4f5e3378e946b541
+  RNReanimated: b292a2aee945230a9c5e01889043ba088b5fb9b8
+  RNScreens: 0f01bbed9bd8045a8d58e4b46993c28c7f498f3c
+  RNSVG: 8588ee1ca9b2e6fd2c99466e35b3db0e9f81bb40
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: afd04ff05ebe0121a00c468a8a3c8080221cb14c
+  Yoga: 9b7fb56e7b08cde60e2153344fa6afbd88e5d99f
 
 PODFILE CHECKSUM: 87506345285a0371afb28b9c3e6daaa999c214f3
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.15.2

apps/docs/static/img/paint/semi-transparent-circle.png

@@ -56,11 +56,24 @@ class DrawingCtx {
     SkPaint paint;
     paint.setAntiAlias(true);
     paints.push_back(paint);
+    opacities.push_back(1.0f);
   }
 
-  void pushPaint(SkPaint &paint) { paints.push_back(paint); }
+  float getOpacity() const { return opacities.back(); }
+  
+  void setOpacity(float newOpacity) {
+    opacities.back() = std::clamp(newOpacity, 0.0f, 1.0f);
+  }
+
+  void pushPaint(SkPaint &paint) { 
+    paints.push_back(paint);
+    opacities.push_back(opacities.back());
+  }
 
-  void savePaint() { paints.push_back(SkPaint(getPaint())); }
+  void savePaint() { 
+    paints.push_back(SkPaint(getPaint()));
+    opacities.push_back(opacities.back());
+  }
 
   void saveBackdropFilter() {
     // Initialize image filter as nullptr
@@ -96,6 +109,7 @@ class DrawingCtx {
     }
     auto paint = paints.back();
     paints.pop_back();
+    opacities.pop_back();
     return paint;
   }
 
@@ -182,6 +196,9 @@ class DrawingCtx {
   std::vector<sk_sp<SkImageFilter>> imageFilters;
   std::vector<sk_sp<SkPathEffect>> pathEffects;
   std::vector<SkPaint> paintDeclarations;
+
+private:
+  std::vector<float> opacities;
 };
 
 } // namespace RNSkia

apps/example/ios/Podfile.lock

@@ -153,13 +153,11 @@ class SavePaintCmd : public Command {
     ctx->savePaint();
     auto &paint = ctx->getPaint();
     if (props.opacity.has_value()) {
-      paint.setAlphaf(paint.getAlphaf() * props.opacity.value());
+      ctx->setOpacity(ctx->getOpacity() * props.opacity.value());
     }
     if (props.color.has_value()) {
-      auto currentOpacity = paint.getAlphaf();
       paint.setShader(nullptr);
       paint.setColor(props.color.value());
-      paint.setAlphaf(currentOpacity * paint.getAlphaf());
     }
     if (props.blendMode.has_value()) {
       paint.setBlendMode(props.blendMode.value());

packages/skia/cpp/api/recorder/DrawingCtx.h

@@ -294,7 +294,7 @@ class Recorder {
   void play(DrawingCtx *ctx) {
     for (const auto &cmd : commands) {
       switch (cmd->type) {
-
+			  
       case Group: {
         // Do nothing here for now
         break;
@@ -483,17 +483,6 @@ class Recorder {
         break;
       }
 
-      case CommandType::DrawPaint: {
-        ctx->canvas->drawPaint(ctx->getPaint());
-        break;
-      }
-
-      case CommandType::DrawText: {
-        auto *textCmd = static_cast<TextCmd *>(cmd.get());
-        textCmd->draw(ctx);
-        break;
-      }
-
       case CommandType::RestorePaint: {
         ctx->restorePaint();
         break;
@@ -512,7 +501,10 @@ class Recorder {
       default: {
         // Handle all drawing commands
         auto currentPaints = ctx->paintDeclarations;
-        currentPaints.push_back(ctx->getPaint()); // Add current paint
+        // apply alpha to the current paint.
+        SkPaint paint(ctx->getPaint());
+        paint.setAlphaf(paint.getAlphaf() * ctx->getOpacity());
+        currentPaints.push_back(paint);
         ctx->paintDeclarations.clear();
 
         for (auto &paint : currentPaints) {

packages/skia/cpp/api/recorder/Paint.h

@@ -10,7 +10,7 @@ import {
   Paint,
   Path,
 } from "../../components";
-import { checkImage } from "../../../__tests__/setup";
+import { checkImage, docPath } from "../../../__tests__/setup";
 import { fitbox } from "../../components/shapes/FitBox";
 
 const blendModes = [
@@ -167,4 +167,47 @@ describe("Paint", () => {
       threshold: 0,
     });
   });
+  it("should override colors", async () => {
+    const { vec } = importSkia();
+    const strokeWidth = 10;
+    const { width, height } = surface;
+    const c = vec(width / 2, height / 2);
+    const r = (width - strokeWidth) / 2;
+    const result = await surface.draw(
+      <>
+        <Circle c={c} r={r} color="transparent">
+          <Paint color="lightblue" />
+          <Paint color="#adbce6" style="stroke" strokeWidth={strokeWidth} />
+          <Paint color="#ade6d8" style="stroke" strokeWidth={strokeWidth / 2} />
+        </Circle>
+      </>
+    );
+    checkImage(result, docPath("paint/stroke.png"));
+  });
+  it("colors don't influence opacity (1)", async () => {
+    const { vec } = importSkia();
+    const strokeWidth = 10;
+    const { width, height } = surface;
+    const c = vec(width / 2, height / 2);
+    const r = (width - strokeWidth) / 2;
+    const result = await surface.draw(
+      <Group color="rgba(0,0,0,0.5)">
+        <Circle c={c} r={r} color="lightblue" />
+      </Group>
+    );
+    checkImage(result, docPath("paint/opaque-circle.png"));
+  });
+  it("colors don't influence opacity (2)", async () => {
+    const { vec } = importSkia();
+    const strokeWidth = 10;
+    const { width, height } = surface;
+    const c = vec(width / 2, height / 2);
+    const r = (width - strokeWidth) / 2;
+    const result = await surface.draw(
+      <Group opacity={0.5}>
+        <Circle c={c} r={r} color="lightblue" />
+      </Group>
+    );
+    checkImage(result, docPath("paint/semi-transparent-circle.png"));
+  });
 });

packages/skia/cpp/api/recorder/RNRecorder.h

@@ -22,12 +22,14 @@ export const createDrawingContext = (
   const imageFilters: SkImageFilter[] = [];
   const pathEffects: SkPathEffect[] = [];
   const paintDeclarations: SkPaint[] = [];
+  const opacities: number[] = [];
 
   let nextPaintIndex = 1;
 
-  // Initialize first paint
+  // Initialize first paint and opacity
   paintPool[0] = Skia.Paint();
   paints.push(paintPool[0]);
+  opacities.push(1);
 
   // Methods (formerly class methods)
   const savePaint = () => {
@@ -39,9 +41,18 @@ export const createDrawingContext = (
     const nextPaint = paintPool[nextPaintIndex];
     nextPaint.assign(getCurrentPaint()); // Reuse allocation by copying properties
     paints.push(nextPaint);
+    opacities.push(opacities[opacities.length - 1]);
     nextPaintIndex++;
   };
 
+  const getOpacity = () => {
+    return opacities[opacities.length - 1];
+  };
+
+  const setOpacity = (newOpacity: number) => {
+    opacities[opacities.length - 1] = Math.max(0, Math.min(1, newOpacity));
+  };
+
   const saveBackdropFilter = () => {
     let imageFilter: SkImageFilter | null = null;
     const imgf = imageFilters.pop();
@@ -63,6 +74,7 @@ export const createDrawingContext = (
   };
 
   const restorePaint = () => {
+    opacities.pop();
     return paints.pop();
   };
 
@@ -125,6 +137,8 @@ export const createDrawingContext = (
     }, // the "getter" for the current paint
     restorePaint,
     materializePaint,
+    getOpacity,
+    setOpacity,
   };
 };
 

packages/skia/src/renderer/__tests__/e2e/Paint.spec.tsx

@@ -67,7 +67,7 @@ function play(ctx: DrawingContext, _command: Command) {
       ctx.paints.push(command.props.paint);
     } else {
       ctx.savePaint();
-      setPaintProperties(ctx.Skia, ctx.paint, command.props);
+      setPaintProperties(ctx.Skia, ctx, command.props);
     }
   } else if (isCommand(command, CommandType.RestorePaint)) {
     ctx.restorePaint();
@@ -101,7 +101,11 @@ function play(ctx: DrawingContext, _command: Command) {
   } else if (isCommand(command, CommandType.RestoreCTM)) {
     ctx.canvas.restore();
   } else {
-    const paints = [ctx.paint, ...ctx.paintDeclarations];
+    // TODO: is a copy needed here?
+    // apply opacity to the current paint.
+    const paint = ctx.paint.copy();
+    paint.setAlphaf(paint.getAlphaf() * ctx.getOpacity());
+    const paints = [paint, ...ctx.paintDeclarations];
     ctx.paintDeclarations = [];
     paints.forEach((p) => {
       ctx.paints.push(p);

packages/skia/src/sksg/Recorder/DrawingContext.ts

@@ -6,11 +6,12 @@ import {
   StrokeCap,
   StrokeJoin,
 } from "../../../skia/types";
-import type { SkPaint, Skia } from "../../../skia/types";
+import type { Skia } from "../../../skia/types";
+import type { DrawingContext } from "../DrawingContext";
 
 export const setPaintProperties = (
   Skia: Skia,
-  paint: SkPaint,
+  ctx: DrawingContext,
   {
     opacity,
     color,
@@ -25,14 +26,14 @@ export const setPaintProperties = (
   }: PaintProps
 ) => {
   "worklet";
+  const { paint } = ctx;
+
   if (opacity !== undefined) {
-    paint.setAlphaf(paint.getAlphaf() * opacity);
+    ctx.setOpacity(ctx.getOpacity() * opacity);
   }
   if (color !== undefined) {
-    const currentOpacity = paint.getAlphaf();
     paint.setShader(null);
     paint.setColor(processColor(Skia, color));
-    paint.setAlphaf(currentOpacity * paint.getAlphaf());
   }
   if (blendMode !== undefined) {
     paint.setBlendMode(BlendMode[enumKey(blendMode)]);