Drawing on Panel lazarus / 39-Graphics ---------------------------------------------------------------------- PeterX · 2021-10-17 08:07 Drawing on Panel .. asked several times again and again, yes .. Why not ? It's a decendent of a TWinControl. I solved it - for a upcoming component - by overwriting procedure Paint Any comments ? Is this the wrong way to go ? ---------------------------------------------------------------------- PeterX · 2021-10-17 09:04 .. now using bgrabitmap-11.4 from https://github.com/bgrabitmap/bgrabitmap/releases ---------------------------------------------------------------------- circular · 2021-10-17 09:38 Yes, overriding Paint is the way.  I wonder about always calling the inherited Paint, in case something in the base control is done. But that's probably unnecessary. Using CanvasBGRA is also the way. ---------------------------------------------------------------------- Okoba · 2021-10-17 09:49 Your way is correct. As Circular mentioned, using CanvasBGRA seems a good idea, or even Canvas2d. One other note is that if you are trying to be more efficient or using this way for big controls, you can create and destroy the Bitmap with controls Create and destroy, and fill it with transparent pixels every time. This way is more efficient as you do not make and allocate memory for each refresh of the control. ---------------------------------------------------------------------- PeterX · 2021-10-17 10:35 Quote from: circular on October 17, 2021, 11:38:45 amI wonder about always calling the inherited Paint, in case something in the base control is done. But that's probably unnecessary. Yes, sometimes "hidden" things happen in the overwritten Component / procedure .. ---------------------------------------------------------------------- PeterX · 2021-10-17 10:43 Quote from: Okoba on October 17, 2021, 11:49:49 amYour way is correct. As Circular mentioned, using CanvasBGRA seems a good idea, or even Canvas2d. I've never used BGRA, just discovered it today. What does Canvas2D do different to CanvasBGRA ? Quote from: Okoba on October 17, 2021, 11:49:49 amOne other note is that if you are trying to be more efficient or using this way for big controls, you can create and destroy the Bitmap with controls Create and destroy, and fill it with transparent pixels every time. This way is more efficient as you do not make and allocate memory for each refresh of the control. Yes, I also thought "why is the bitmap always created and destroyed ?" But I picked it up from some example code, indeed should be done more efficiently, and Bitmap then must be resized "OnResize" of the TPanel ( .. or whatever Component I use as basis component) What is "transparent pixels" in BGRA ? ---------------------------------------------------------------------- PeterX · 2021-10-17 11:03 The text, drawn by Canvas.TextOut() , looks better than the one drawn by BGRA .. ( the upper one is from BGRA, the lower one from Lazarus Canvas ) Probably a Font Settings issue only, or because it's different size, but .. No problem to finally draw the text onto the Canvas, after drawing the Bitmap  .. ---------------------------------------------------------------------- winni · 2021-10-17 11:03 Quote from: PeterX on October 17, 2021, 12:43:48 pmWhat does Canvas2D do different to CanvasBGRA ? Hi Have a look at https://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_14 Quote What is "transparent pixels" in BGRA ? Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i TBGRAPixel = packed record    red, green, blue, alpha: byte;     end; alpha is the amount of transparency. 255 means it is opaque 0 means total transparency Winni ---------------------------------------------------------------------- PeterX · 2021-10-17 11:11 Quote from: winni on October 17, 2021, 01:03:40 pmHi Have a look at https://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_14 Thanks a lot for the Link !  I have to get deeper into it after I managed to create the first working, basic, CustomComponent for my app .. ---------------------------------------------------------------------- circular · 2021-10-17 13:08 Quote from: PeterX on October 17, 2021, 01:03:22 pmThe text, drawn by Canvas.TextOut() , looks better than the one drawn by BGRA .. ( the upper one is from BGRA, the lower one from Lazarus Canvas ) The problem comes from the fact that the bitmap is not cleared with an opaque color. You use the function Rectangle to do that, but that only draw the edges. You can use FillRectangle instead. Or just Fill to fill everything. ---------------------------------------------------------------------- PeterX · 2021-10-17 17:07 Quote from: circular on October 17, 2021, 03:08:15 pmYou use the function Rectangle to do that, but that only draw the edges. You can use FillRectangle instead. Or just Fill to fill everything. With Brush.Color:= xxx   procedure Rectangle() also fills the Rect. Now I tried with yellow .. and Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i         // Draws the background        GUIBitmap.CanvasBGRA.Pen.Color:= clBlack;        GUIBitmap.CanvasBGRA.Brush.Color:= clYellow;  // clWhite;      GUIBitmap.CanvasBGRA.Rectangle( 0, 0, Width, Height);        //GUIBitmap.CanvasBGRA.FloodFill( 0, 0);  but no difference, from my point of view, for the example text with BGRA. ( Floodfill does the same, but - no question - without the black border .. ) ---------------------------------------------------------------------- circular · 2021-10-21 07:01 Oh yeah I got confused, I thought about the Rectangle function outside of CanvasBGRA like GUIBitmap.Rectangle, but indeed inside CanvasBGRA it can fill. Maybe Brush.Style is not set to bsSolid and thus shape is not filled. In your second screenshot, the result is better, font is rendered properly. So actually filling makes a difference. As said before you can do GUIBitmap.Fill(clYellow) for example. Now, the font appears bolder, it seems there isn't ClearType effect. I suggest you try to play with the Font.Quality property, for example setting it to fqFineClearType. ---------------------------------------------------------------------- PeterX · 2021-10-21 18:59 Quote from: circular on October 21, 2021, 09:01:59 am.. I suggest you try to play with the Font.Quality property, for example setting it to fqFineClearType. Instead of always redrawing the whole Bitmap in Paint() I will draw my "background" once on Create()  ( and on resize if required .. ) and just map this static Bitmap in Paint().  This saves CPU time. As the shown Text changes and needs to be redrawn regulary I can draw it with the default Canvas TextOut(). The advantage for me is, the Text appearance / look is exactly like in any other Lazarus Component.