fix: drawImage alpha should not effect by fillStyle

__test__/regression.spec.ts

@@ -1,7 +1,10 @@
+import { promises as fs } from 'fs'
+
 import test from 'ava'
 
-import { createCanvas } from '../index'
+import { createCanvas, loadImage } from '../index'
 import { snapshotImage } from './image-snapshot'
+import { join } from 'path'
 
 test('transform-with-state', async (t) => {
   const canvas = createCanvas(256, 256)
@@ -79,3 +82,14 @@ test('transform-with-radial-gradient-x', async (t) => {
   ctx.restore()
   await snapshotImage(t, { canvas, ctx })
 })
+
+test('global-alpha-should-not-effect-drawImage', async (t) => {
+  const canvas = createCanvas(300, 320)
+  const ctx = canvas.getContext('2d')
+  ctx.fillStyle = 'rgba(3, 169, 244, 0.5)'
+
+  // Image
+  const image = await fs.readFile(join(__dirname, 'javascript.png'))
+  ctx.drawImage(await loadImage(image), 0, 0, 200, 100)
+  await snapshotImage(t, { ctx, canvas })
+})

package.json

@@ -65,36 +65,36 @@
     "@jimp/custom": "^0.16.1",
     "@jimp/jpeg": "^0.16.1",
     "@jimp/png": "^0.16.1",
-    "@napi-rs/cli": "^2.9.0",
-    "@octokit/rest": "^19.0.0",
+    "@napi-rs/cli": "^2.11.4",
+    "@octokit/rest": "^19.0.4",
     "@swc-node/register": "^1.5.1",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^17.0.35",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.26.0",
-    "ava": "^4.2.0",
+    "@types/lodash": "^4.14.184",
+    "@types/node": "^18.7.13",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
+    "ava": "^4.3.1",
     "benny": "^3.7.1",
-    "canvas": "^2.9.1",
-    "canvaskit-wasm": "^0.36.0",
+    "canvas": "^2.9.3",
+    "canvaskit-wasm": "^0.36.1",
     "colorette": "^2.0.19",
     "conventional-changelog-cli": "^2.2.2",
-    "echarts": "^5.3.2",
-    "eslint": "^8.16.0",
+    "echarts": "^5.3.3",
+    "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-sonarjs": "^0.15.0",
     "husky": "^8.0.1",
-    "lint-staged": "^13.0.0",
+    "lint-staged": "^13.0.3",
     "lodash": "^4.17.21",
     "npm-run-all": "^4.1.5",
     "pinst": "^3.0.0",
     "png.js": "^0.2.1",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "pretty-bytes": "^6.0.0",
     "skia-canvas": "^1.0.0",
     "table": "^6.8.0",
-    "typescript": "^4.7.2"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "*.@(js|ts|tsx|yml|yaml|md|json|html)": [

src/ctx.rs

@@ -4,9 +4,8 @@ use std::result;
 use std::slice;
 use std::str::FromStr;
 
-use cssparser::{Color as CSSColor, Parser, ParserInput};
-use napi::bindgen_prelude::*;
-use napi::*;
+use cssparser::{Color as CSSColor, Parser, ParserInput, RGBA};
+use napi::{bindgen_prelude::*, JsBuffer, JsString, NapiRaw, NapiValue};
 use rgb::FromSlice;
 
 use crate::pattern::CanvasPattern;
@@ -374,8 +373,7 @@ impl Context {
     let alpha = current_paint.get_alpha();
     match &last_state.fill_style {
       Pattern::Color(c, _) => {
-        let mut color = *c;
-        color.alpha = ((color.alpha as f32) * (alpha as f32 / 255.0)).round() as u8;
+        let color = Self::multiply_by_alpha(c, alpha);
         paint.set_color(color.red, color.green, color.blue, color.alpha);
       }
       Pattern::Gradient(g) => {
@@ -500,8 +498,7 @@ impl Context {
     let global_alpha = current_paint.get_alpha();
     match &last_state.stroke_style {
       Pattern::Color(c, _) => {
-        let mut color = *c;
-        color.alpha = ((color.alpha as f32) * (global_alpha as f32 / 255.0)).round() as u8;
+        let color = Self::multiply_by_alpha(c, global_alpha);
         paint.set_color(color.red, color.green, color.blue, color.alpha);
       }
       Pattern::Gradient(g) => {
@@ -570,9 +567,8 @@ impl Context {
   fn shadow_blur_paint(&self, paint: &Paint) -> Option<Paint> {
     let alpha = paint.get_alpha();
     let last_state = &self.state;
-    let shadow_color = &last_state.shadow_color;
-    let mut shadow_alpha = shadow_color.alpha;
-    shadow_alpha = ((shadow_alpha as f32) * (alpha as f32 / 255.0)) as u8;
+    let shadow_color = Self::multiply_by_alpha(&last_state.shadow_color, alpha);
+    let shadow_alpha = shadow_color.alpha;
     if shadow_alpha == 0 {
       return None;
     }
@@ -618,7 +614,8 @@ impl Context {
     d_height: f32,
   ) -> Result<()> {
     let bitmap = bitmap.0.bitmap;
-    let paint = self.fill_paint()?;
+    let mut paint = self.fill_paint()?;
+    paint.set_alpha((self.state.global_alpha * 255.0).round() as u8);
     if let Some(drop_shadow_paint) = self.drop_shadow_paint(&paint) {
       let surface = &mut self.surface;
       surface.canvas.draw_image(
@@ -748,6 +745,15 @@ impl Context {
     surface.canvas.concat(&current_transform);
     Ok(())
   }
+
+  // ./skia/modules/canvaskit/color.js
+  fn multiply_by_alpha(color: &RGBA, global_alpha: u8) -> RGBA {
+    let mut result = *color;
+    result.alpha = ((0.0_f32.max((result.alpha_f32() * (global_alpha as f32 / 255.0)).min(1.0)))
+      * 255.0)
+      .round() as u8;
+    result
+  }
 }
 
 #[napi(object)]
@@ -1820,11 +1826,6 @@ impl CanvasRenderingContext2D {
   }
 }
 
-#[js_function(4)]
-fn context_2d_constructor(ctx: CallContext) -> Result<JsUndefined> {
-  ctx.env.get_undefined()
-}
-
 enum BitmapRef<'a> {
   Borrowed(&'a mut Bitmap),
   Owned(Bitmap),