C# Snippet Tutorial - How to Draw Text on an Image [Beginner]

In this snippet tutorial we're going to be adding on to our series of C# image editing tutorials. This tutorial is going to provide the code required to do basic text drawing including anti-aliasing and text alignment.

For more information on C# image editing, check out our previous two tutorials: C# Tutorial - Image Editing: Saving, Cropping, and Resizing and C# Tutorial - Image Editing:Rotate.

Ok, let's get started. The first thing we need to do is get a Bitmap object from an image file.

Bitmap myBitmap = new Bitmap("C:\\\\myImage.jpg");

Now that we have a Bitmap object we can get a Graphics object from it. The Graphics object will be doing all of our text drawing.

Bitmap myBitmap = new Bitmap("C:\\myImage.jpg");
Graphics g = Graphics.FromImage(myBitmap);

We can now use this Graphics object to perform all of our drawing. Let's start by simply placing some text in the upper left corner.

g.DrawString("My\nText", new Font("Tahoma", 40), Brushes.White, new PointF(0, 0));

This call will place white text in the upper left corner of your image.

C# Tutorial - Image Editing: Saving, Cropping, andResizing has lots of information on how to resize and save your new image. It's kind of hard to see in the above example but the edges on that text are a little rough. Let's look at how to anti-alias the text to make it look a little smoother.

g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
g.DrawString("My\nText", new Font("Tahoma", 20), Brushes.White, new PointF(0, 0));

Here we set the TextRenderingHint to AntiAlias before we draw the text. Now all consecutive calls to DrawString will output anti-aliased text. Now that we have the basics down for putting text on the image, let's look at how to do some text aligning. We'll start with some horizontal alignment.

StringFormat strFormat = new StringFormat();
strFormat.Alignment = StringAlignment.Center;
g.DrawString("My\nText", new Font("Tahoma", 20), Brushes.White,
    new RectangleF(0, 0, 500, 500), strFormat);

The StringFormat class has lots of options for formatting strings, but we're going to be focusing on the ones that control alignment. The Alignment property controls the horizontal alignment and I set it to StringAlignment.Center, which will center the text at the top of the image. I also modified the DrawString function to take a Rectangle, which for simplicity I just set to the entire size of the image. The last argument is the StringFormat object.

So now that we have the text centered horizontally, let's center it vertically. Now the text will be put right in the center of the image.

StringFormat strFormat = new StringFormat();
strFormat.Alignment = StringAlignment.Center;
strFormat.LineAlignment = StringAlignment.Center;
g.DrawString("My\nText", new Font("Tahoma", 20), Brushes.White,
    new RectangleF(0, 0, 500, 500), strFormat);

The only thing I added to make this happen was setting the StringFormat.LineAlignment property to StringAlignment.Center.

That's it for drawing text on an image. You can of course make all sorts of neat text effects using Brushes and Formats, but I'll leave all of that up to you. Remember to check out C# Tutorial - Image Editing:Saving, Cropping, and Resizing and C# Tutorial - Image Editing:Rotate for lots of other information on images and C#.