Draw smooth graphics in C#

[smooth graphics]

This example shows how to draw smooth graphics such as text, resized images, lines, and shapes.

When drawing, C# sometimes favors speed over quality. If you look closely at the picture shown here, you’ll see that the text, image, and ellipse on the left all have bumpy pieces. In contrast, the graphics on the right are smooth.

Most programs are very fast so it’s silly to favor speed over quality. By default Windows uses smoothed fonts so why shouldn’t you?

You can set the following three Graphics object properties to determine smoothness:

  • SmoothingMode—Determines smoothness for shapes such as lines, ellipses, and polygons.
  • TextRenderingHint—Determines smoothness for text.
  • InterpolationMode—Determines smoothness for images that are scaled.

The example program uses the following code to draw its text, images, and ellipses, first roughly and then smoothly.

// Draw text, shapes, and pictures smoothly and not smoothly.
private void Form1_Paint(object sender, PaintEventArgs e)
    using (Font the_font = new Font("Times New Roman", 16))
        // Draw without smoothing.
        int x = 10, y = 10;
        e.Graphics.TextRenderingHint =
        e.Graphics.DrawString("Without Smoothing",
            the_font, Brushes.Blue, x, y);
        y += 25;
            x, y, 50, 50);
        y += 60;
        e.Graphics.DrawEllipse(Pens.Red, x, y, 100, 50);

        // Draw with smoothing.
        e.Graphics.SmoothingMode =
        e.Graphics.TextRenderingHint =
        e.Graphics.InterpolationMode =

        x = 200;
        y = 10;
        e.Graphics.DrawString("With Smoothing", the_font,
            Brushes.Blue, x, y);
        y += 25;
            x, y, 50, 50);
        y += 60;
        e.Graphics.DrawEllipse(Pens.Red, x, y, 100, 50);

By default, the Graphics object uses high-quality text rendering, so for many programs you don’t need to change the TextRenderingHint property. This example initially sets the Graphics object’s TextRenderingHint property to SingleBitPerPixelGridFit so you can see what lower quality text looks like, but you probably wouldn’t do that in a real program.

By default the Graphics object draws images and shapes at a lower quality, however, so you may want to change the other drawing properties described shortly.

After setting TextRenderingHint, the program draws some text, an image that is scaled to half its original size, and an ellipse. The results are shown on the left of the picture.

Next the program sets the Graphics object’s smoothing properties. SmoothingMode determines how smoothly shapes such as lines and ellipses are drawn, TextRenderingHint determines how smoothly text is drawn, and InterpolationMode determines how smoothly images are drawn when they are resized. (You can experiment with the code to see the effects of the other values that these properties can take.)

After setting these properties, the program draws the same text, resized image, and ellipse again. This time the results are smooth.

There is a small performance penalty for drawing smoothly, but the difference is so small that you won’t notice it in most programs. You will probably only see a difference in programs that draw a huge number of shapes or images. In that case you can consider removing the smoothing to save time.

An alternative approach is to draw the images once on a bitmap and then display the bitmap. That way the program won’t need to draw the complicated picture during every Paint event. The example Draw on a bitmap in C# demonstrates that approach.

Download Example   Follow me on Twitter   RSS feed   Donate

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

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.