Draw graphics in ASP.NET ~ Computer Programming

You can draw graphics on browser window using Graphics class. This class exists in System.Drawing namespace. It provide different types of graphics methods, such as DrawArc, DrawImage, DrawIcon, DrawLine and many more. Graphics class hold pen instance for creating graphics onto the screen.

Algorithm Behind the drawing

Step-1 : First define the graphics area on browser window using Bitmap class.
Step-2 : Create instance of Graphics class and initialize with Bitmap class instance.
Step-3 : Create Pen class object with specified color and width.
Step-4 : Create starting point and ending point using Point class.
Step-5 : Draw graphics and save into Bitmap instance.

Lets take an simple example of drawing Line , Rectangle in asp.net

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
<asp:Image ID="Image1" runat="server" Height="83px" Width="95px" />
</form>
</body>
</html>

CodeBehind Code Draw Rectangle

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Drawing.Imaging;

public partial class Default3 : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
Bitmap bmp = new Bitmap(500,200);
Graphics g = Graphics.FromImage(bmp);
g.Clear(Color.Green);
Pen p1 = new Pen(Color.Orange, 3);

g.DrawRectangle(p1, 20, 20, 80, 40);

string path = Server.MapPath("~/Image/rect.jpeg");
bmp.Save(path, ImageFormat.Jpeg);

Image1.ImageUrl = "~/Image/rect.jpeg";

g.Dispose();
bmp.Dispose();

}
}

Code Generating the following output

CodeBehind Code for Draw Line

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Drawing.Imaging;

public partial class Default3 : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
Bitmap bmp = new Bitmap(500,200);
Graphics g = Graphics.FromImage(bmp);
g.Clear(Color.Green);
Pen p1 = new Pen(Color.Orange, 3);

g.DrawLine(p1, 20, 20, 100, 100);
string path = Server.MapPath("~/Image/line.jpeg");
bmp.Save(path, ImageFormat.Jpeg);

Image1.ImageUrl = "~/Image/line.jpeg";

g.Dispose();
bmp.Dispose();

}
}

Code Generating the following output

Computer Programming