The document discusses the basic components of drawing in Android - Bitmap, Canvas, Drawing Primitives, and Paint. It provides examples of how to use the Canvas class to draw different primitives like points, lines, rectangles, arcs, and paths using a Paint object. It also demonstrates how to draw text, bitmaps and configure properties of the Paint like color, stroke and style.

1. 17 November 2020
Canvas API in Android
Android Weekly Sharing @ LMWN

2. Canvas
A container that holds various drawing elements

3. Basic Drawing Component in Android
• Bitmap
• Canvas
• Drawing Primitive
• Paint
Hold the pixels
Host the draw calls
Rect, Path, Text, Bitmap, …
Describe the color and styles for the drawing

4. Basic Drawing Component in Android
• Bitmap
• Canvas
• Drawing Primitive
• Paint
Hold the pixels
Host the draw calls
Rect, Path, Text, Bitmap, …
Describe the color and styles for the drawing

5. Basic Drawing Component in Android
• Bitmap
• Canvas
• Drawing Primitive
• Paint
Hold the pixels
Host the draw calls
Rect, Path, Text, Bitmap, …
Describe the color and styles for the drawing

6. Basic Drawing Component in Android
• Bitmap
• Canvas
• Drawing Primitive
• Paint
Hold the pixels
Host the draw calls
Rect, Path, Text, Bitmap, …
Describe the color and styles for the drawing

7. class CustomView: View {
override fun onMeasure( /* ... */ ) { /* ... */ }
override fun onLayout( /* ... */ ) { /* ... */ }
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
// ...
}
}
Canvas
Drawing Primitives
Paint
Compositing Mode

8. Drawn out: How
Android Renders
(Google I/O '18)

10. val bitmap = Bitmap.createBitmap(
1280,
720,
Bitmap.Config.ARGB_8888
)
val canvas = Canvas(bitmap)
Canvas
Drawing Primitives
Paint
Compositing Mode

11. Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val x = 20f
val y = 20f
canvas.drawPoint(x, y, paint)
Canvas
Drawing Primitives
Paint
Compositing Mode
Point

12. Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val startX = 30f
val startY = 30f
val endX = 100f
val endY = 100f
canvas.drawLine(
startX,
startY,
endX,
endY,
paint
)
Canvas
Drawing Primitives
Paint
Compositing Mode
นี่คือ Line
อันนี้ก็ LINE

13. val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val left = 20f
val top = 20f
val right = 200f
val bottom = 150f
canvas.drawRect(
left,
top,
right,
bottom,
paint
)
Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

14. val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val rect = RectF(
20f,
20f,
200f,
150f
)
canvas.drawRect(rect, paint)
Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

15. val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val left = 100f
val top = 100f
val right = 200f
val bottom = 200f
val startAngle = 160f
val sweepAngle = 180f
val useCenter = false
canvas.drawArc(
left, top, right, bottom,
startAngle, sweepAngle,
useCenter, paint
)
Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

16. Canvas
Drawing Primitives
Paint
Compositing Mode
val left = 100f
val top = 100f
val right = 200f
val bottom = 200f
val startAngle = 160f
val sweepAngle = 180f
(100, 100)
(200, 200)
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

17. Canvas
Drawing Primitives
Paint
Compositing Mode
val left = 100f
val top = 100f
val right = 200f
val bottom = 200f
val startAngle = 160f
val sweepAngle = 180f
270°
90°
0°180°
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

18. Canvas
Drawing Primitives
Paint
Compositing Mode
val left = 100f
val top = 100f
val right = 200f
val bottom = 200f
val startAngle = 160f
val sweepAngle = 180f
Sweep 180°
Start at 160°
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

19. val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val rectF = RectF(
20f,
20f,
200f,
150f)
val radius = 10f
canvas.drawRoundRect(
rectF,
radius,
radius,
paint
)
Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

20. val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
canvas.drawCircle(
100f,
100f,
50f,
paint
)
Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

21. val canvas: Canvas = /* ... */
canvas.drawColor(Color.parseColor("#28353E"))
Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

22. val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val path = Path().apply {
moveTo(20f, 20f)
lineTo(40f, 20f)
arcTo(
RectF(40f, 5f, 70f, 35f),
180f, -180f, false
)
lineTo(90f, 20f)
lineTo(90f, 90f)
lineTo(20f, 90f)
close()
}
canvas.drawPath(path, paint)
Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

23. val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val path = Path().apply {
moveTo(20f, 20f)
lineTo(40f, 20f)
arcTo(
RectF(40f, 5f, 70f, 35f),
180f, -180f, false
)
lineTo(90f, 20f)
lineTo(90f, 90f)
lineTo(20f, 90f)
close()
}
canvas.drawPath(path, paint)
Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap

24. Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val path = Path().apply {
moveTo(20f, 20f)
lineTo(40f, 20f)
arcTo(
RectF(40f, 5f, 70f, 35f),
180f, -180f, false
)
lineTo(90f, 20f)
lineTo(90f, 90f)
lineTo(20f, 90f)
close()
}
canvas.drawPath(path, paint)

25. Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val path = Path().apply {
moveTo(20f, 20f)
lineTo(40f, 20f)
arcTo(
RectF(40f, 5f, 70f, 35f),
180f, -180f, false
)
lineTo(90f, 20f)
lineTo(90f, 90f)
lineTo(20f, 90f)
close()
}
canvas.drawPath(path, paint)

26. Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val path = Path().apply {
moveTo(20f, 20f)
lineTo(40f, 20f)
arcTo(
RectF(40f, 5f, 70f, 35f),
180f, -180f, false
)
lineTo(90f, 20f)
lineTo(90f, 90f)
lineTo(20f, 90f)
close()
}
canvas.drawPath(path, paint)

27. Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val path = Path().apply {
moveTo(20f, 20f)
lineTo(40f, 20f)
arcTo(
RectF(40f, 5f, 70f, 35f),
180f, -180f, false
)
lineTo(90f, 20f)
lineTo(90f, 90f)
lineTo(20f, 90f)
close()
}
canvas.drawPath(path, paint)

28. Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val path = Path().apply {
moveTo(20f, 20f)
lineTo(40f, 20f)
arcTo(
RectF(40f, 5f, 70f, 35f),
180f, -180f, false
)
lineTo(90f, 20f)
lineTo(90f, 90f)
lineTo(20f, 90f)
close()
}
canvas.drawPath(path, paint)

29. Canvas
Drawing Primitives
Paint
Compositing Mode
Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val path = Path().apply {
moveTo(20f, 20f)
lineTo(40f, 20f)
arcTo(
RectF(40f, 5f, 70f, 35f),
180f, -180f, false
)
lineTo(90f, 20f)
lineTo(90f, 90f)
lineTo(20f, 90f)
close()
}
canvas.drawPath(path, paint)

30. Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val text = "LINE MAN Wongnai"
val x = 20f
val y = 100f
canvas.drawText(text, x, y, paint)
Canvas
Drawing Primitives
Paint
Compositing Mode
LINE MAN Wongnai

31. Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val text = "LINE MAN Wongnai"
val x = 20f
val y = 100f
canvas.drawText(text, x, y, paint)
Canvas
Drawing Primitives
Paint
Compositing Mode
LINE MAN Wongnai

32. Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val left = 10f
val top = 10f
val bitmap: Bitmap = /* ... */
canvas.drawBitmap(
bitmap,
left,
top,
paint
)
Canvas
Drawing Primitives
Paint
Compositing Mode

33. Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val bitmap: Bitmap = /* ... */
val source = Rect(
0,
0,
bitmap.width,
bitmap.height
)
val destination = Rect(
0,
0,
bitmap.width / 2,
bitmap.height / 2
)
canvas.drawBitmap(bitmap, source, destination, paint)
Canvas
Drawing Primitives
Paint
Compositing Mode

34. Point
Line
Rect
Arc
Round Rect
Circle
Color
Path
Text
Bitmap
val canvas: Canvas = /* ... */
val paint: Paint = /* ... */
val bitmap: Bitmap = /* ... */
val source: Rect = /* ... */
val left = 10f
val top = 10f
val destination = RectF(
0 + left,
0 + top,
(bitmap.width / 2) + left,
(bitmap.height / 2) + top
)
canvas.drawBitmap(bitmap, source, destination, paint)
Canvas
Drawing Primitives
Paint
Compositing Mode

35. val paint = Paint().apply {
/* ... */
}
Canvas
Drawing Primitives
Paint
Compositing Mode

36. val paint = Paint().apply {
/* ... */
isAntiAlias = true
}
Canvas
Drawing Primitives
Paint
Compositing Mode

37. val paint = Paint().apply {
/* ... */
style = Paint.Style.FILL
}
Canvas
Drawing Primitives
Paint
Compositing Mode
Paint.Style.FILL
Paint.Style.STROKE
Paint.Style.FILL_AND_STROKE

38. val paint = Paint().apply {
/* ... */
strokeCap = /* ... */
strokeJoin = /* ... */
strokeMiter = /* ... */
strokeWidth = /* ... */
}
Canvas
Drawing Primitives
Paint
Compositing Mode

39. val paint = Paint().apply {
/* ... */
color = /* 8-bit RGB */
alpha = /* 8-bit Alpha */
}
Canvas
Drawing Primitives
Paint
Compositing Mode

40. val context: Context = /* ... */
val paint = Paint().apply {
/* ... */
textSize = 32f
typeface = ResourcesCompat.getFont(context, R.font.sarabun)
}
Canvas
Drawing Primitives
Paint
Compositing Mode

41. val paint = Paint().apply {
/* ... */
textAlign = /* ... */
letterSpacing = /* ... */
isFakeBoldText = /* ... */
isLinearText = /* ... */
isStrikeThruText = /* ... */
isSubpixelText = /* ... */
isUnderlineText = /* ... */
fontFeatureSettings = /* ... */
fontMetrics = /* ... */
fontSpacing = /* ... */
isElegantTextHeight = /* ... */
}
Canvas
Drawing Primitives
Paint
Compositing Mode

42. val paint = Paint().apply {
/* ... */
textSize = /* ... */
typeface = /* ... */
}
val width: Float = paint.measureText("LINE MAN Wongnai")
Canvas
Drawing Primitives
Paint
Compositing Mode

43. val paint = Paint().apply {
/* ... */
maskFilter = BlurMaskFilter(
10f,
BlurMaskFilter.Blur.NORMAL
)
}
Canvas
Drawing Primitives
Paint
Compositing Mode

44. val canvas: Canvas = /* ... */
// Clear all
canvas.drawColor(Color.WHITE, PorterDuff.Mode.CLEAR)
Canvas
Drawing Primitives
Paint
Compositing Mode

45. Compositing Mode
“Compositing Digital Images” by Thomas Porter and Tom Duff
Canvas
Drawing Primitives
Paint
Compositing Mode
android.graphics.PorterDuff.Mode

46. Compositing Mode
Source Destination
Canvas
Drawing Primitives
Paint
Compositing Mode

47. Compositing Mode
Mode.ADD
Mode.CLEAR
Mode.DARKEN
Canvas
Drawing Primitives
Paint
Compositing Mode

48. Compositing Mode
Mode.DST
Mode.DST_ATOP
Mode.DST_IN
Canvas
Drawing Primitives
Paint
Compositing Mode

49. Compositing Mode
Mode.DST_OUT
Mode.DST_OVER
Mode.LIGHTEN
Canvas
Drawing Primitives
Paint
Compositing Mode

50. Compositing Mode
Mode.MULTIPLY
Mode.OVERLAY
Mode.SCREEN
Canvas
Drawing Primitives
Paint
Compositing Mode

51. Compositing Mode
Mode.SRC
Mode.SRC_ATOP
Mode.SRC_IN
Canvas
Drawing Primitives
Paint
Compositing Mode

52. Compositing Mode
Mode.SRC_OUT
Mode.SRC_OVER
Mode.XOR
Canvas
Drawing Primitives
Paint
Compositing Mode

53. Compositing Mode Canvas
Drawing Primitives
Paint
Compositing Mode
αout
Cout = Csrc + Cdst - Csrc * Cdst
= αsrc + αdst - αsrc * αdst

54. Compositing Mode Canvas
Drawing Primitives
Paint
Compositing Mode
#FF2196F3
#FFE91E63
A 255, R 33, G 150, B 243
A 255, R 233, G 30, B 99
αout
Cout = Csrc + Cdst - Csrc * Cdst
= αsrc + αdst - αsrc * αdst

55. Compositing Mode Canvas
Drawing Primitives
Paint
Compositing Mode
#FF2196F3
#FFE91E63
A1.000, R0.129, G0.588, B0.952
A1.000, R0.913, G0.117, B0.388
αout
Cout = Csrc + Cdst - Csrc * Cdst
= αsrc + αdst - αsrc * αdst

56. Compositing Mode
αout
Canvas
Drawing Primitives
Paint
Compositing Mode
Cred
#FF2196F3
#FFE91E63
A1.000, R0.129, G0.588, B0.952
A1.000, R0.913, G0.117, B0.388
= 0.129 + 0.913 - 0.129 * 0.913
= 1 + 1 - 1 * 1
Cgreen
Cblue
= 0.588 + 0.117 - 0.588 * 0.117
= 0.952 + 0.388 - 0.952 * 0.388

57. Compositing Mode
αout
Canvas
Drawing Primitives
Paint
Compositing Mode
Cred
#FF2196F3
#FFE91E63
= 0.924223
= 1
Cgreen
Cblue
= 0.636204
= 0.970624

58. Compositing Mode
αout
Canvas
Drawing Primitives
Paint
Compositing Mode
Cred
#FF2196F3
#FFE91E63
= 0.924223 * 255
= 1 * 255
Cgreen
Cblue
= 0.636204 * 255
= 0.970624 * 255

59. Compositing Mode
αout
Canvas
Drawing Primitives
Paint
Compositing Mode
Cred
#FF2196F3
#FFE91E63
= 235 EB
= 255 FF
Cgreen
Cblue
= 162 A2
= 247 F7
#FFEBA2F7

60. Compositing Mode
αout
Canvas
Drawing Primitives
Paint
Compositing Mode
Cred
#FF2196F3
#FFE91E63
= 235 EB
= 255 FF
Cgreen
Cblue
= 162 A2
= 247 F7
Mode.SCREEN
#FFEBA2F7
Mode.LIGHTEN
Mode.DARKEN
Mode.OVERLAY
Mode.ADD

61. Compositing Mode
αout
Canvas
Drawing Primitives
Paint
Compositing Mode
Cred
#FF2196F3
#FFE91E63
= 235 EB
= 255 FF
Cgreen
Cblue
= 162 A2
= 247 F7
Mode.SCREEN
#FFEBA2F7

62. val paint = Paint().apply {
xfermode = PorterDuffXfermode(PorterDuff.Mode.OVERLAY)
}
Canvas
Drawing Primitives
Paint
Compositing Mode

63. Q & A