No history yet

Canvas Essentials

Your Digital Drawing Board

When you want to draw something custom in an Android app, from a simple chart to a complex game interface, you'll work with the Canvas object. Think of the Canvas as your digital drawing surface. It provides the methods you need to place shapes, lines, and text onto the screen. But before you can draw, you need to understand the map.

Android uses a standard 2D coordinate system, but with a slight twist if you're coming from a math class. The origin point, (0,0), is not in the center or the bottom-left. It's at the top-left corner of the drawing area. From there, the x-axis values increase as you move to the right, and y-axis values increase as you move down.

To draw anything on the Canvas, you also need a Paint object. If the Canvas is the surface, the Paint is your collection of brushes, pens, and colors. It holds all the styling information for what you're about to draw. You configure the Paint object first, then pass it to a Canvas drawing method.

Key Paint properties include color, style (stroke or fill), and stroke width. You can also enable [{}] for smoother graphics.

Lesson image

The most basic style decision is whether to fill a shape or just draw its outline. You control this with Paint.Style. Setting it to Paint.Style.FILL will create a solid shape, while Paint.Style.STROKE will only draw the border. If you use STROKE, you can also set the strokeWidth property to control the thickness of the line.

Color is set using an integer that represents the red, green, blue, and alpha (transparency) channels. The android.graphics.Color class provides helpful methods to create these color integers. An alpha value of 255 is fully opaque, while 0 is fully transparent.

Drawing Basic Shapes

Once your Paint is configured, you can call methods on your Canvas object. These methods are typically called within a custom View's onDraw() method. Android calls this method whenever the view needs to be redrawn.

Here are a few fundamental drawing commands:

// Inside a custom View class
override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    // 1. Set up the Paint object
    val paint = Paint().apply {
        color = Color.RED
        style = Paint.Style.STROKE
        strokeWidth = 8f
        isAntiAlias = true
    }

    // 2. Draw a rectangle
    // canvas.drawRect(left, top, right, bottom, paint)
    canvas.drawRect(100f, 200f, 400f, 500f, paint)

    // 3. Draw a circle
    paint.color = Color.BLUE
    paint.style = Paint.Style.FILL
    // canvas.drawCircle(centerX, centerY, radius, paint)
    canvas.drawCircle(600f, 350f, 100f, paint)

    // 4. Draw a line
    paint.color = Color.GREEN
    // canvas.drawLine(startX, startY, stopX, stopY, paint)
    canvas.drawLine(100f, 600f, 800f, 600f, paint)
}

Notice how you can reuse the same Paint object and simply change its properties between drawing calls. Each call renders directly onto the Canvas's underlying bitmap, layering new shapes on top of what was drawn before.

Canvas vs. SurfaceView

For most custom UI components, drawing directly in a View's onDraw() method is perfect. The system manages the drawing loop, and it's simple to implement. However, this drawing happens on the application's main or UI thread. If your drawing logic is complex or needs to happen very frequently, like in a game, this can slow down your app and make it feel unresponsive.

This is where comes in. A SurfaceView provides a dedicated drawing surface that can be updated from a separate background thread. This means you can run a high-speed rendering loop for an animation or game without blocking the main thread from handling user input and other UI events. The trade-off is increased complexity; you are responsible for managing the drawing thread and ensuring it properly interacts with the view's lifecycle.

Rule of thumb: Use a custom View and onDraw() for static graphics or simple animations. Use SurfaceView for real-time games or video playback.

Now you have a solid grasp of the building blocks for 2D drawing. Let's test your knowledge.

Quiz Questions 1/6

In the Android Canvas coordinate system, where is the origin point (0,0) located?

Quiz Questions 2/6

Which object defines how to draw (e.g., color, style, line thickness), and which object provides the methods to draw on?

With these fundamentals, you can translate almost any design requirement into drawing commands, giving you complete control over the pixels on the screen.