Draw numbered circles and save them into files in C#

[numbered circles]

Sometimes I need to draw numbered circles to place on pictures that I’m going to use in books or articles. This program lets me draw circles that look nice, that are smoothly shaded, and that have transparent backgrounds.

The MakeNumberBitmap method shown in the following code does most of the interesting work of drawing numbered circles.

// Make a bitmap containing the indicated text.
private Bitmap MakeNumberBitmap(int width, Color bg_color,
    Color fg_color, bool draw_border, Font fg_font, string txt)
    // Size the bitmap.
    Bitmap bm = new Bitmap(width, width);
    using (Graphics gr = Graphics.FromImage(bm))
        gr.SmoothingMode = SmoothingMode.AntiAlias;
        gr.TextRenderingHint = TextRenderingHint.AntiAlias;

        // Make the background transparent.

        // Fill the background.
        Rectangle rect = new Rectangle(2, 2, width - 4, width - 4);
        using (LinearGradientBrush bg_brush =
            new LinearGradientBrush(rect, Color.White,
            bg_color, LinearGradientMode.BackwardDiagonal))
            gr.FillEllipse(bg_brush, rect);

        // Outline the background.
        if (draw_border)
            using (Pen bg_pen = new Pen(bg_color))
                gr.DrawEllipse(bg_pen, rect);

        // Draw the sample text.
        using (StringFormat string_format = new StringFormat())
            string_format.Alignment = StringAlignment.Center;
            string_format.LineAlignment = StringAlignment.Center;
            using (Brush fg_brush = new SolidBrush(fg_color))
                gr.DrawString(txt, fg_font, fg_brush,
                    rect, string_format);

    return bm;

The code first creates a bitmap of the desired size and makes a Graphics object to draw on it. It sets the object’s SmoothingMode to create smooth lines and sets TextRenderingHint to make smooth text. It then clears the bitmap with the transparent color.

Next the code fills a circle with a background that shades from white in the upper right corner to the desired background color in the lower left corner. If the draw_border parameter is true, the code draws an outline around the circle.

Finally the code draws the text that it should display (a number in this example) centered on the bitmap and returns the bitmap.

The example has several event handlers that make it redraw the sample if any of the drawing parameters changes, but the most interesting remaining piece of code saves a series of images in files.

// Make the files.
private void btnMakeFiles_Click(object sender, EventArgs e)
    // Make the files.
    for (decimal i = nudMin.Value; i <= nudMax.Value; i++)
        // Make the file.
        Bitmap bm = MakeNumberBitmap((int)nudWidth.Value,
            picBackground.BackColor, picForeground.BackColor,
            chkBorder.Checked, lblFontSample.Font,

        // Save the file.
        bm.Save("Number" + i.ToString() + ".png", ImageFormat.Png);

    MessageBox.Show("Done", "Done", MessageBoxButtons.OK,

This code loops through the numeric values selected by the NumericUpDown controls nudMin and nudMax. For each value, the code calls MakeNumberBitmap to make a bitmap. It then calls the bitmap’s Save method to make it save the file into the current directory. The code saves the image in the PNG format, which supports transparent colors, so the background outside of the circle is transparent.

Download Example   Follow me on Twitter   RSS feed   Donate

This entry was posted in drawing, fonts, graphics and tagged , , , , , , , , , , . Bookmark the permalink.

3 Responses to Draw numbered circles and save them into files in C#

  1. Susan says:

    Is this available in any software I can use to design my mortar placement for my fireworks show? I use sandboxes and place different sized mortars that need to be numbered to follow the show design when fired. I would really love to be able to drag different sized numbered circles into a box to show my crew how to lay them out. Creating these every year takes hours. Thanks for this interesting article.

  2. Rod Stephens says:

    I’ll see if I can come up with something for you.

  3. Rod Stephens says:

    See this example: Make a shaded ellipse control in C#. By using Visual Studio and this control, you should be able to quickly lay out a form and print it to show where you want the mortars.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.