Canvas Drawing

[Home]   [Puzzles & Projects]    [Delphi Techniques]   [Math topics]   [Library]   [Utilities]




Search WWW


As of October, 2016, Embarcadero is offering a free release of Delphi (Delphi 10.1 Berlin Starter Edition ).     There are a few restrictions, but it is a welcome step toward making more programmers aware of the joys of Delphi.  They do say "Offer may be withdrawn at any time", so don't delay if you want to check it out.  Please use the feedback link to let me know if the link stops working.


Support DFF - Shop

 If you shop at Amazon anyway,  consider using this link. 


We receive a few cents from each purchase.  Thanks


Support DFF - Donate

 If you benefit from the website,  in terms of knowledge, entertainment value, or something otherwise useful, consider making a donation via PayPal  to help defray the costs.  (No PayPal account necessary to donate via credit card.)  Transaction is secure.

Mensa Daily Puzzlers

For over 15 years Mensa Page-A-Day calendars have provided several puzzles a year for my programming pleasure.  Coding "solvers" is most fun, but many programs also allow user solving, convenient for "fill in the blanks" type.  Below are Amazon  links to the two most recent years.

Mensa 365 Puzzlers  Calendar 2017

Mensa 365 Puzzlers Calendar 2018

(Hint: If you can wait, current year calendars are usually on sale in January.)


Feedback:  Send an e-mail with your comments about this program (or anything else).

Search only





Here's a simple program that illustrates how to draw on a canvas, save the drawing to a bitmap (or file), clear the canvas  and redisplay a previously saved image.    Oh, and scribble too if you want.

We'll use a TImage component to provide the canvas.  Even though  forms have canvas properties, drawing on them generally  causes more headaches than it's worth.   First, it is impossible to redraw the image when the form is redisplayed.  Also the canvas covers the entire form so it's easy to draw on top of other controls ( buttons. labels, etc.), usually with undesirable results.     Both of these problems disappear when we use TImage.   

I placed several buttons on the form: 

bulletCreate ellipses adds 10 ellipses of random size and color to the canvas,   You can see here how clipping is beneficial.   TColor fields are made of 3 bytes representing the red, green and blue components (RGB format).  So I colored each ellipse using Random(256*256*256);  Don't be concerned about efficiency loss from not pre-multiplying these numbers - Delphi compiler will do it for you one time so the object code will contain only the product.    We also could have written Random($FFFFFF); to specify the same result as 3 hexadecimal bytes. 
bulletClear simply draws a white rectangle over the entire screen.
bulletSave canvas to list creates a TBitmap, copies the canvas to it, and saves the bitmap as an object in the listbox items stringlist.   Copyrect is the standard procedure to accomplish this.
bulletSave canvas to file only takes a couple of lines of code to save the current canvas to a file.  Savedialog provides the user interface to get the filename for us.  

Retrieving the images from the listbox when the user selects and item is pretty easy - just copy the bitmap from the selected item back to the canvas, again using Copyrect.   

Finally I added a scribble feature to allow user drawing on the canvas.  This uses a OnMouseDown exit to set the initial drawing parameters (Pen width and color) and to set a Drawing boolean variable so that OnMouseMove will know whether a line  is to be drawn.   And of course, OnMouseUp exits just to reset the Drawing flag to false.     I learned here that cursor refresh while drawing sometimes erases a portion of the line being drawn.  The solution trick is to set the Cursor to CrNone before the line is drawn and CrDefault after.  

Plenty of room to expand on this if you want --  user control of pen colors and widths, erase or undo mode, customized cursors, for starters.   

Have fun!

Click here to download source code.   

  [Feedback]   [Newsletters (subscribe/view)] [About me]
Copyright 2000-2018, Gary Darby    All rights reserved.