OUJOOD.COM
Le widget Canvas est une surface de dessin en pixels sur laquelle on trace des formes géométriques, des lignes, du texte et des images. C'est le fondement des interfaces graphiques personnalisées dans Tkinter — jeux simples, visualisations de données, éditeurs graphiques basiques. Tout ce qui nécessite un rendu libre plutôt qu'une mise en page de widgets.
Formes de base
import tkinter as tk
fenetre = tk.Tk()
fenetre.title("Canvas — formes")
fenetre.geometry("480x320")
canvas = tk.Canvas(fenetre, width=460, height=300, bg="white")
canvas.pack(padx=10, pady=10)
# Rectangle : (x1, y1, x2, y2)
canvas.create_rectangle(20, 20, 120, 80,
fill="#bbdefb", outline="#1565c0", width=2)
# Ovale / cercle
canvas.create_oval(150, 20, 250, 100,
fill="#c8e6c9", outline="#2e7d32", width=2)
# Ligne
canvas.create_line(20, 120, 200, 180,
fill="#e53935", width=3, dash=(6, 3)) # dash=(segment, espace)
# Polygone
canvas.create_polygon(260, 30, 320, 100, 200, 100,
fill="#fff9c4", outline="#f57f17", width=2)
# Texte
canvas.create_text(380, 60, text="Canvas",
font=("Arial", 18, "bold"), fill="#7b1fa2")
# Arc
canvas.create_arc(300, 150, 440, 280,
start=30, extent=240,
fill="#ffccbc", outline="#bf360c", width=2)
fenetre.mainloop()
Chaque méthode create_*() retourne un identifiant entier — l'ID de l'élément créé. Cet ID permet de modifier, déplacer ou supprimer l'élément plus tard. Les coordonnées sont toujours en pixels depuis le coin supérieur gauche du Canvas.
Modifier et déplacer des éléments
import tkinter as tk
fenetre = tk.Tk()
fenetre.geometry("380x260")
canvas = tk.Canvas(fenetre, width=360, height=220, bg="#f5f5f5")
canvas.pack(padx=10, pady=10)
# Créer un cercle et stocker son ID
cercle_id = canvas.create_oval(160, 80, 200, 120,
fill="#ef5350", outline="")
label = tk.Label(fenetre, text="Cliquez les boutons")
label.pack()
def bouger_gauche():
canvas.move(cercle_id, -15, 0) # déplace de -15px en x, 0 en y
def bouger_droite():
canvas.move(cercle_id, 15, 0)
def changer_couleur():
canvas.itemconfig(cercle_id, fill="#42a5f5") # modifie les propriétés
frame = tk.Frame(fenetre)
frame.pack(pady=3)
tk.Button(frame, text="← Gauche", command=bouger_gauche).pack(side="left", padx=4)
tk.Button(frame, text="Droite →", command=bouger_droite).pack(side="left", padx=4)
tk.Button(frame, text="Couleur", command=changer_couleur).pack(side="left", padx=4)
fenetre.mainloop()
canvas.move(id, dx, dy) déplace un élément par rapport à sa position actuelle. canvas.itemconfig(id, **options) modifie ses propriétés visuelles. canvas.delete(id) le supprime. canvas.delete("all") efface tout le Canvas.
Dessiner avec la souris
import tkinter as tk
fenetre = tk.Tk()
fenetre.title("Canvas — dessin libre")
fenetre.geometry("460x340")
canvas = tk.Canvas(fenetre, bg="white", cursor="crosshair")
canvas.pack(fill="both", expand=True, padx=8, pady=8)
dernier = {"x": None, "y": None}
def debut_trait(event):
dernier["x"] = event.x
dernier["y"] = event.y
def tracer(event):
if dernier["x"] is not None:
canvas.create_line(
dernier["x"], dernier["y"],
event.x, event.y,
fill="#1565c0", width=2,
capstyle=tk.ROUND, smooth=True
)
dernier["x"] = event.x
dernier["y"] = event.y
def fin_trait(event):
dernier["x"] = None
dernier["y"] = None
def effacer():
canvas.delete("all")
canvas.bind("", debut_trait)
canvas.bind("", tracer) # clic gauche maintenu + mouvement
canvas.bind("",fin_trait)
tk.Button(fenetre, text="Effacer", command=effacer).pack(pady=4)
fenetre.mainloop()
<B1-Motion> est l'événement déclenché quand la souris se déplace avec le bouton gauche maintenu. La technique du "dernier point" crée des traits continus plutôt que des points isolés. Ce type de Canvas interactif est la base des éditeurs graphiques et des jeux simples — on y revient dans le projet mini application.
Par carabde | Mis à jour le 30 avril 2025