title: How to paint on a Canvas with Transparency and Opacity?
body: <p><strong>Overview</strong></p>
  
  <p>From the GR32 library, I am using TImgView32 to render a grid which will be my transparent background like so:</p>
  
  <p><img src="https://i.stack.imgur.com/0BYg1.png" alt="enter image description here"></p>
  
  <p>Placed inside the TImgView32 I have a regular TImage, where I will be drawing onto the canvas, something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/NgBGx.png" alt="enter image description here"></p>
  
  <p><strong>Task</strong></p>
  
  <p>What I would like to achieve is the ability to set the opacity of the brush, allowing further possibilities for image editing in my program. Rather than have one flat color been drawn, setting the opacity of the brush allows different levels of color depth etc.</p>
  
  <p>I found this question earlier whilst searching around: <a href="https://stackoverflow.com/questions/4916913/draw-opacity-ellipse-in-delphi-2010/4917296#comment13314494_4917296">Draw opacity ellipse in Delphi 2010</a> - Andreas Rejbrand has provided a few examples in his answer for that question.</p>
  
  <p>I have looked at what Andreas did, and came up with my own simplified attempt but I am stuck with a problem. Take a look at these next two images, the first is with the transparent background and the second with a black background to show the problem more clearer:</p>
  
  <p><img src="https://i.stack.imgur.com/WJYb6.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/9vuTU.png" alt="enter image description here"></p>
  
  <p>As you can see, around the brush (circle) is a really annoying square I cannot get rid of. All that should be visible is the brush. This is my code used to produce those results:</p>
  
  <pre><code>procedure DrawOpacityBrush(ACanvasBitmap: TBitmap; X, Y: Integer;
    AColor: TColor; ASize: Integer; Opacity: Integer);
  var
    Bmp: TBitmap;
  begin
    Bmp := TBitmap.Create;
    try
      Bmp.SetSize(ASize, ASize);
      Bmp.Transparent := False;
  
      with Bmp.Canvas do
      begin
        Pen.Color := AColor;
        Pen.Style := psSolid;
        Pen.Width := ASize;
        MoveTo(ASize div 2, ASize div 2);
        LineTo(ASize div 2, ASize div 2);
      end;
  
      ACanvasBitmap.Canvas.Draw(X, Y, Bmp, Opacity);
    finally
      Bmp.Free;
    end;
  end;
  
  procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton;
    Shift: TShiftState; X, Y: Integer);
  begin
    DrawOpacityBrush(Image1.Picture.Bitmap, X, Y, clRed, 50, 85);
  end;
  </code></pre>
  
  <p>which produces this on a regular bitmap:</p>
  
  <p><img src="https://i.stack.imgur.com/BlhdU.png" alt="enter image description here"></p>
  
  <p>The idea I had (based on Andreas way of creating an ellipse with opacity) was to render a typical brush on the canvas, assign it to a offscreen bitmap then redraw it onto the main bitmap with the opacity. Which works, except that annoying square around the edge.</p>
  
  <p><strong>How can I render a brush with opacity as illustrated in the screenshots, but without that square around the brush circle?</strong></p>
  
  <p>If I set <code>Bmp.Transparent := True</code> there is still a white box, but no opacity anymore. Just a solid white square and solid filled red circle.</p>