Search code examples
c#htmlgraphicssystem.drawing

Creating a circle in the middle of a page in c#


I would like help with creating a circle in the middle of a page. The page is completely blank with nothing - no divs or anything. I have trawled the internet for answers and have found a lot but they don't seem to show up on the screen. The page just stays blank.

A lot of the code I have found works but I don't know what to add to the HTML file so the circle shows up. The page is a basic Visual Studio ASP.NET project, if that is any help.

I would appreciate it if anyone was able to provide the C# code however, I would be over the moon if anyone could tell me how to my HTML so it actually shows up on the page.

EDIT: The only reason I didn't post the code was because I tried so many options yet none worked, so I didn't know what one to post. This is the code I have decided to put here since it seems like the most likley to work:

 public static class GraphicsExtensions
{
    public static void DrawCircle(this Graphics g, Pen pen,
                                  float centerX, float centerY, float radius)
    {
        g.DrawEllipse(pen, centerX - radius, centerY - radius,
                      radius + radius, radius + radius);
    }

    public static void FillCircle(this Graphics g, Brush brush,
                                  float centerX, float centerY, float radius)
    {
        g.FillEllipse(brush, centerX - radius, centerY - radius,
                      radius + radius, radius + radius);
    }
}

I am just not sure whether I should put this in an empty C# file and link it to the HTML or whether it should be added to the 'Default.aspx.cs (or even the "Global.asax.cs")' file and liked to the HTML using some kind of form.

EDIT2: Thanks for the help! I am currently stuck on how to get the code to draw a circle in that canvas and color it. I have this code to get the element:



    System.Windows.Forms.WebBrowser webBrowser = null;
    HtmlElement circle;
    HtmlDocument document = webBrowser.Document;
    circle = document.GetElementById("circlecanvas");

but how would I draw a circle in that canvas and color it. I have tried lots of stuff like this so far:



    Graphics graphics = null;
    Pen pen = null;
    Brush brush = null;
    Rectangle rectangle = new Rectangle();
    rectangle.X = circle.ClientRectangle.X;
    rectangle.Y = circle.ClientRectangle.Y;
    graphics.DrawRectangle(pen, rectangle);
    e.Graphics.FillRectangle(brush, rectangle);

yet none work. So is it possible?

Thanks, Dream


Solution

  • A few possibilities exist

    I assume you are using some kind of web framework from C# but this answer applies to all of them.

    You could use canvas to draw a circle.

    Drawing circles with canvas

    You could use CSS

    If you give your div border radii equal to 50% of its width and height, it will be circular. How to draw circle in html page?