title: How to Drawing Text with Outline onto Images?
body: <p>I have been searching and looking for Drawing text with outline onto images? </p>
  
  <p>Here my code</p>
  
  <pre><code>    private static void tulisnamafile(string imagepath, string textnya)
      {
  
          Image image = Image.FromStream(new MemoryStream(File.ReadAllBytes(imagepath)));
          Bitmap newImage = new Bitmap(640, 380);
          using (Graphics g = Graphics.FromImage(newImage))
          {
              // Draw base image
              g.DrawImageUnscaled(image, 0, 0);
              //Static is HERE
              SolidBrush brushing = new SolidBrush(Color.White);
              Font font = new Font(("Comic Sans MS"), 20.0f);
              int napoint = newImage.Height - 90;
              int napointa = image.Width - 200;
              FontFamily ff = new FontFamily("Times New Roman");
              int fontSize = 24;
              Font f = new Font(ff, fontSize, FontStyle.Regular);
              StringFormat sf = new StringFormat();
              Rectangle displayRectangle = new Rectangle(new Point(5, napoint), new Size(newImage.Width - 1, newImage.Height - 1));
              g.DrawEllipse(Pens.Magenta, new Rectangle(0, 0, 1, 1));
              GraphicsPath gp = new GraphicsPath();
              gp.AddString(textnya, ff, (int)FontStyle.Bold, fontSize + 4, new Point(0, 0), sf);
              g.FillPath(Brushes.White, gp);
              g.DrawPath(Pens.Black, gp);
  
              g.Flush(FlushIntention.Sync);
              g.Dispose();
          }
          image.Dispose();
          string fileName = "ab.jpg";
          string path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, fileName);
          MessageBox.Show(path);
          newImage.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);
          newImage.Dispose();
      }
  </code></pre>
  
  <p>and Its the trigger</p>
  
  <pre><code>    private void button3_Click(object sender, EventArgs e)
      {
  
          string imagename = "C:\\Documents and Settings\\admin\\My Documents\\Visual Studio 2008\\Projects\\template\\template\\bin\\Debug\\bg.jpg";
          tulisnamafile(imagename, "SlimPort® SP1002; Connect mobile devices to any big screen. High Speed micro USB");
  
      }
  </code></pre>
  
  <p>Check the Code result: </p>
  
  <p><img src="https://i.stack.imgur.com/u0oeY.jpg" alt="Messing resultnya">
  Such messing result, UNWRAPPED and with white color </p>
  
  <p>This what I want, and with wrapping?</p>
  
  <p><img src="https://i.stack.imgur.com/sjIGV.jpg" alt="This One"></p>
  
  <p>I found in <a href="http://www.example.com/" rel="noreferrer">CodeProject</a> but not luck, its using C++. Based <a href="http://www.neowin.net/forum/topic/269276-c-drawing-outline-text/" rel="noreferrer">someone in neowin</a> and tried this <a href="http://www.java2s.com/Code/CSharp/2D-Graphics/TextRotate2.htm" rel="noreferrer">one too</a>..</p>
  
  <p>But still not luck.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Here my working code, for who maybe need it... based from Abdias Software's code ( check the answers ), I make small changes ( there some error in those code).</p>
  
  <pre><code>        private static void tulisnamafile(string imagepath, string textnya)
      {
  
          float fontSize = 22;
  
          Image image = Image.FromStream(new MemoryStream(File.ReadAllBytes(imagepath)));
          //some test image for this demo
          Bitmap bmp = (Bitmap)Image.FromFile(imagepath);
          Graphics g = Graphics.FromImage(bmp);
  
          //this will center align our text at the bottom of the image
          StringFormat sf = new StringFormat();
          sf.Alignment = StringAlignment.Center;
          sf.LineAlignment = StringAlignment.Far;
  
          //define a font to use.
          Font f = new Font("Impact", fontSize, FontStyle.Bold, GraphicsUnit.Pixel);
  
          //pen for outline - set width parameter
          Pen p = new Pen(ColorTranslator.FromHtml("#77090C"), 8);
          p.LineJoin = LineJoin.Round; //prevent "spikes" at the path
  
          //this makes the gradient repeat for each text line
          Rectangle fr = new Rectangle(0, bmp.Height - f.Height, bmp.Width, f.Height);
          LinearGradientBrush b = new LinearGradientBrush(fr,
                                                          ColorTranslator.FromHtml("#FF6493"),
                                                          ColorTranslator.FromHtml("#D00F14"),
                                                          90);
  
          //this will be the rectangle used to draw and auto-wrap the text.
          //basically = image size
          Rectangle r = new Rectangle(0, 0, bmp.Width, bmp.Height);
  
          GraphicsPath gp = new GraphicsPath();
  
          //look mom! no pre-wrapping!
          gp.AddString(textnya, f.FontFamily, (int)FontStyle.Bold, fontSize, r, sf);
  
          //these affect lines such as those in paths. Textrenderhint doesn't affect
          //text in a path as it is converted to ..well, a path.    
          g.SmoothingMode = SmoothingMode.AntiAlias;
          g.PixelOffsetMode = PixelOffsetMode.HighQuality;
  
          //TODO: shadow -&gt; g.translate, fillpath once, remove translate
          g.DrawPath(p, gp);
          g.FillPath(b, gp);
  
          //cleanup
          gp.Dispose();
          b.Dispose();
          b.Dispose();
          f.Dispose();
          sf.Dispose();
          g.Dispose();
          string fileName = "ab.jpg";
          string path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, fileName);
          bmp.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);
          bmp.Dispose();
      }
  </code></pre>