In Flutter, is it possible to draw an image with a replaced color and opacity?

Question

I have a grey image. I want to draw it using a color but with opacity to a canvas. By using Color Filter, I was able to draw it on the canvas by replacing the color. If I adjust the alpha value, it changes image opacity (partial grey/red). The following code snippet shows how to draw a grey image as red onto a canvas. But how can I draw the red image as transparent to the canvas?

static void drawBrushDetail(Canvas canvas, double cx, double cy, double brushSize, double imageAngleRad) {
    canvas.translate(cx + brushSize / 2, cy + brushSize / 2);
    ui.Image bt = imgBrushTip; //this is a gray image
    Color selectedColor = getDrawColor(cx,cy);
    final _paint = Paint();
    var alphaVal=255;
    //if I change alphaVal to 100, the final draw looks more gray instead of red with 100 Alpha
    _paint.colorFilter = ColorFilter.mode(selectedColor.withAlpha(alphaVal), BlendMode.srcATop);
    if (imageAngleRad != 0.0) canvas.rotate(imageAngleRad);
    canvas.translate(-brushSize / 2, -brushSize / 2);
    
    // draw image with specified brushSize
    canvas.drawImageRect(bx, Rect.fromLTRB(0, 0, bt.width, bt.height),
        Rect.fromLTRB(0, 0, brushSize, brushSize), _paint);
    //traslate back, don't want to use save and restore layer since it's expensive
    canvas.translate(brushSize / 2, brushSize / 2);
    if (imageAngleRad != 0.0) canvas.rotate(-imageAngleRad);
    canvas.translate(-cx - brushSize / 2, -cy - brushSize / 2);
}

See the image below. The above code will paint the image with solid red color. (image pointed by the red arrow). But I want the result to be an image with red color and transparent. Since in Flutter, there is no API to set alpha for canvas, don't know if it is possible.

Answer 1

I figured it out but the credit goes to pskink

I only need to draw one image(gray color) but I need to do the followings:

1. Resize and rotate the image.
2. Replace the gray image with red color.
3. Draw the image (now in red) with opacity.

Here is the code snippet.

static void drawBrushDetail1(Canvas canvas, double cx, double cy, double size) {
    final _paint = Paint();
    const opacity = 0.5;
    _paint.color = Color.fromRGBO(0, 0, 0, opacity);
    ui.Image bx = uiImg[0];
    double scale = size / 60; //size is brush tip size and 60x60 is gray image size
    canvas.drawAtlas(
        bx,
        [
             RSTransform.fromComponents(
              rotation: imageAngleRad,
              scale: scale,
              anchorX: 30,
              anchorY: 30,
              translateX: cx,
              translateY: cy)
        ],
        [
          /* The size of gray image is 60 x 60  */
          const Rect.fromLTWH(0, 0, 60, 60)
        ],
        [Colors.red],
        BlendMode.dstIn, /*This is replace the gray image wiht red color
        null /* No need for cullRect */,
        _paint); //_paint will paint the red image in 0.5 opacity
    
  }