The Canvas widget is Tkinter's primary widget for displaying graphics. With a vast range of built-in functions for creating graphics manually, it is the perfect choice for the display piece of a computer game.

Let's have a quick introduction to the Canvas widget's built-in drawing capabilities. Open up a new file and type in the following:

import tkinter as tk

window = tk.Tk()

canvas = tk.Canvas(window, bg="white", width=300, height=300)
canvas.pack()

canvas.create_oval((0, 0, 300, 300), fill="yellow")

canvas.create_arc((50, 100, 100, 150), extent=180, fill="black")
canvas.create_arc((200, 100, 250, 150), extent=180, fill="black")

canvas.create_line((50, 200, 110, 240), fill="red", width=5)
canvas.create_line((110, 240, 190, 240), fill="red", width=5)
canvas.create_line((190, 240, 250, 200), fill="red", width=5)

window.mainloop()

Run this code and you should see a nice smiley face appear on your computer screen:

Let's go over exactly how we create this image:

1. We begin by importing tkinter and abbreviating it to tk as usual.
2. Next, we create a main window using the Tk widget.
3. Inside our main window, we place a 300 pixel by 300 pixel canvas. We color this white to make it more apparent.
4. We use the pack geometry manager to get this canvas into our main window.
5. Now that we have our canvas inside a window, we are ready to begin drawing.
6. In order to create the face's shape, we use a circle. The Canvas widget has a create_oval method which will create circles (provided we make the bounding box a square).

The Canvas widget handles coordinates with a Cartesian system, with the origin in the top-left of the window. The Y coordinate will go down the window as its value increases, which may take some getting used to if you are familiar with other software in which a positive Y value instead goes upwards. The X coordinate goes further right as it increases, as with most other systems.

The first argument of create_oval is a 4-tuple containing the coordinates of the bounding box in which the oval will be contained. In order, these are top left X, top left Y, bottom right X, bottom right Y.

7. For this demo, we will use the entire canvas to display our face, so we put the top left of the bounding box at the origin: 0, 0. We then place the bottom right of the bounding box at the bottom-right corner of our canvas widget: 300, 300 (we know this because we specified the size of our canvas as 300 by 300). 
8. We use the fill argument to specify that we want our face to be yellow. Luckily, Tkinter can recognize a large number of strings and interpret them as colors. This allows us to use the string literal yellow to color our face.

This code creates a yellow circle which spans the entirety of our window, since the window only contains the canvas.

9. To draw the eyes, we need a semi-circle. The Canvas widget has a create_arc method which allows us to do this.

The create_arc method relies on the same bounding box principle as create_oval. We again use a 4-tuple to specify the coordinates of the bounding box.

The default size of an arc is 90 degrees, which will only make a quarter-circle. To instead achieve a semi-circle, we use the extent argument and set this to 180.

10. We again use the fill argument to color our eyes black.
11. Finally, to draw a smile, we will use three individual lines. The Canvas widget provides draw_line to let us do this.

Another 4-tuple of coordinates specifies where the line begins and where it ends.

12. We color the line red using the fill argument, and make it much thicker than the default by specifying the width argument.

Now all of our drawing is done, we simply need to display our main window. We do this with the usual mainloop method.

While this image isn't going to win any design competitions, hopefully you now have an idea of the drawing capabilities of a Tkinter Canvas.

The rest of the graphics of our game will be displayed by converting existing image files into a format usable by Tkinter's canvas, so don't fret about having to draw each playing card using lines and rectangles!

When it comes to animations, the Canvas widget also has us covered there. Not only can we delete and then redraw elements, but the Canvas widget contains methods like move and itemconfig which will allow us to update positions and sizes of elements to create easy animation.

These methods can be bound to keyboard and mouse events (we will learn how to do this later), creating game-like interaction capabilities, too.

Speaking of which, let's get going with porting our command-line game over to a Canvas widget. You can either open a new file or try just modifying your code from Chapter 2, Back to the Command Line – Basic Blackjack. Let's get started.