Drawing Pad | Visual Basic Sample Code

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

Shape Type

Drawing Color

Line Width

Start X

Start Y

End X

End Y

Radius (for circles)

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