VB Tutor VB.NET 2022 Tutorial VB2019 Tutorial VB6 Tutorial VB Sample Code About Us
Visual Basic Sample Code

Drawing Pad

Create shapes programmatically with Visual Basic


We can create a simple virtual drawing program using Visual Basic 6 as shown in the figure below. We called it drawing pad. In this program, the user needs to fill in all the coordinates and selects a color before proceeding to draw the required shape. If the user forgets to fill in the coordinates or selects a color, he or she will be prompted to do so.

Key Concepts

  • Drawing geometric shapes programmatically
  • Using coordinates to position elements
  • Color selection and application
  • Input validation and error handling
  • Creating interactive drawing tools

Supported Shapes

  • Lines
  • Rectangles (outlined and solid)
  • Circles (outlined and solid)
  • Freehand drawing

Interactive Drawing Demo

Try out the drawing pad below! Enter coordinates, select a color, and draw shapes on the canvas. You can also draw freehand by clicking and dragging.

Controls

Drawing Instructions

Select a shape type and enter coordinates. Click "Draw" to render the shape.

Drawing Canvas

Original VB6 Code

This is the original Visual Basic 6 code for the drawing program as described in the tutorial.

Private Sub cmd_Rectangle_Click()
    x1 = Text1.Text
    y1 = Text2.Text
    x2 = Text3.Text
    y2 = Text4.Text
    Picture1.Line (x1, y1)-(x2, y2), color, B
End Sub

Private Sub cmd_Color_Click()
    CommonDialog1.Flags = &H1&
    CommonDialog1.ShowColor
    color = CommonDialog1.color
End Sub

Private Sub cmd_Circle_Click()
    On Error GoTo addvalues
    x3 = Text5.Text
    y3 = Text6.Text
    r = Text7.Text
    
    Picture1.FillStyle = vbSolid
    Picture1.FillColor = color
    Picture1.Circle (x3, y3), r, color
    Exit Sub
    
addvalues:
    MsgBox ("Please fill in the coordinates, the radius and the color")
End Sub

Private Sub Command5_Click()
    Picture1.Cls
End Sub

Private Sub cmd_SolidRect_Click()
    x1 = Text1.Text
    y1 = Text2.Text
    x2 = Text3.Text
    y2 = Text4.Text
    Picture1.Line (x1, y1)-(x2, y2), color, BF
End Sub

VB.NET Equivalent

Here's how you would implement the same functionality in modern VB.NET using Windows Forms:

Public Class DrawingForm
    Private drawingColor As Color = Color.Black
    
    Private Sub btnColor_Click(sender As Object, e As EventArgs) Handles btnColor.Click
        If ColorDialog1.ShowDialog() = DialogResult.OK Then
            drawingColor = ColorDialog1.Color
        End If
    End Sub
    
    Private Sub btnRectangle_Click(sender As Object, e As EventArgs) Handles btnRectangle.Click
        Dim x1 As Integer = Integer.Parse(txtX1.Text)
        Dim y1 As Integer = Integer.Parse(txtY1.Text)
        Dim x2 As Integer = Integer.Parse(txtX2.Text)
        Dim y2 As Integer = Integer.Parse(txtY2.Text)
        
        Using g As Graphics = PictureBox1.CreateGraphics()
            Using pen As New Pen(drawingColor)
                g.DrawRectangle(pen, Math.Min(x1, x2), Math.Min(y1, y2), 
                               Math.Abs(x2 - x1), Math.Abs(y2 - y1))
            End Using
        End Using
    End Sub
    
    Private Sub btnSolidRectangle_Click(sender As Object, e As EventArgs) Handles btnSolidRectangle.Click
        Dim x1 As Integer = Integer.Parse(txtX1.Text)
        Dim y1 As Integer = Integer.Parse(txtY1.Text)
        Dim x2 As Integer = Integer.Parse(txtX2.Text)
        Dim y2 As Integer = Integer.Parse(txtY2.Text)
        
        Using g As Graphics = PictureBox1.CreateGraphics()
            Using brush As New SolidBrush(drawingColor)
                g.FillRectangle(brush, Math.Min(x1, x2), Math.Min(y1, y2), 
                               Math.Abs(x2 - x1), Math.Abs(y2 - y1))
            End Using
        End Using
    End Sub
    
    Private Sub btnCircle_Click(sender As Object, e As EventArgs) Handles btnCircle.Click
        Dim centerX As Integer = Integer.Parse(txtCenterX.Text)
        Dim centerY As Integer = Integer.Parse(txtCenterY.Text)
        Dim radius As Integer = Integer.Parse(txtRadius.Text)
        
        Using g As Graphics = PictureBox1.CreateGraphics()
            Using pen As New Pen(drawingColor)
                g.DrawEllipse(pen, centerX - radius, centerY - radius, 
                             radius * 2, radius * 2)
            End Using
        End Using
    End Sub
    
    Private Sub btnClear_Click(sender As Object, e As EventArgs) Handles btnClear.Click
        PictureBox1.Image = Nothing
    End Sub
End Class

Drawing Concepts Explained

Coordinate Systems

In computer graphics, the coordinate system starts at the top-left corner (0,0) with:

  • X-axis: Increases to the right
  • Y-axis: Increases downward

This is different from mathematical Cartesian coordinates where Y increases upward.

Drawing Techniques

Shapes are drawn using these fundamental approaches:

  • Lines: Defined by start and end points
  • Rectangles: Defined by top-left and bottom-right corners
  • Circles: Defined by center point and radius

Error Handling

Proper error handling is essential for a good user experience:

  • Validate all inputs before drawing
  • Check for numeric values in coordinate fields
  • Ensure values are within canvas boundaries
  • Provide clear error messages

VB6 to VB.NET Migration

Key differences when moving to VB.NET:

  • Use Graphics object instead of Line/Circle methods
  • Pen class for outlines, Brush for filled shapes
  • Better object-oriented approach
  • Improved event handling