CustomView uses canvas

Tram Ho

Take a look at the above view, with available View object, can we do the same? Or if you can, is it easy? With canvas we can completely handle the problem above. So in this article I will share what I learned about canvas in the easiest way to understand

The article content will include:

  1. General introduction to canvas
  2. Some basic methods
  3. Find out more details through sample

1. Introduction about canvas

Canvas is seen as a 2D surface (visualize like paper, board) that we can draw anything on it.

  • Canvas provides methods to convert our drawing points into bitmaps.
  • Instance of Bitmap class is linked to View instance and shows it in UI
  • Paint objects contain type and color information about how to draw geometries (such as lines, rectangles, ovals, and paths), text, and bitmaps.

Canvas identifies shapes that you can draw on the screen, while Paint determines the color, style, font, etc. of each shape you draw.

When doing the drawing we will get the origin (0,0) in the upper left corner of the screen as shown below.

2. Some basic draw methods

Geometric drawing


It’s as simple as drawing a dash / vertical / diagonal line.


If you want to draw more than 1 line, then you can use drawLines . You just need to provide information of the coordinate values.


The name is too clear. Draw 1 point =]]


Draw multiple points


The most familiar is probably the drawRect draws the rectangle. We can pass coordinates or use the class Rect .


Round is round -> round, drawRoundRect is to draw rectangles with rounded corners based on the radiusX and radiusY properties to adjust the curvature of the corners.

If radiusX = radiusY:

If radiusX> radiusY:

If radiusX <radiusY:


drawCircle draws a circle with centerCoordinateX, centerCoordinateY is center coordinate, radius is radius


Unlike drawing a circle, drawOval does not provide a radius, but is based on the proportions of the rectangle.


drawArc uses the same mechanism as drawing an oval. drawArc uses Rect and has additional startAngle such as startAngle , sweepAngle and useCenter .

  • For startAngle , calculate from the middle of the rectangle, and rotate clockwise
  • For sweepAngle , adjective middle of the rectangle, and rotate counterclockwise

Both startAngle and sweepAngle use angle unit.

  • useCenter is a boolean value that determines whether the arc uses center to draw or not?

For example:

useCenter = false

useCenter = true


drawPath is a very useful method, often used in great drawing apps like paint.

Draw text

Draw text more flexibly than using TextView


  • text is String data.
  • coordinateX and coordinateY are used to coordinate text coordinates.
  • paintText determines how you will draw it (size, color).

Paint color




Draw the image


Required parameters are bitmap and destRect.

The bitmap can be extracted from resources.

destRect the rectangular area the canvas can draw to

3. Find out more details through sample

Going back to the original image, we are going to do a little demo for the paint panel. Use Java: v

The project structure is extremely simple, including:

  • CanvasCustomView: Draw the canvas
  • MainActivity: used to display CanvasCustomView




Out of abundance. Run the app and draw. Thank you for taking the time to see the article.

See at:

Share the news now

Source : Viblo