How To Draw A Python Step By Step

How to Draw on an Image or Canvas in Python Using The Mouse

If you want to draw something on an image or a canvas in Tkinter. There are some steps that you should do first. Follow me in this blog step by step to see how you can easily do it.

The original article on my blog website here.

The steps

Create the application
Create a canvas
Put an image on the canvas
Draw lines on the canvas using the mouse

Create the application

To create the application, we will use only 4 lines of code (if you have never used Tkinter before you can check my other blog about how to create a Tkinter application for beginners at this link). However, I will give you the 4 lines of code to create an empty application that we need in this project.

          from tkinter import *
app = Tk()
app.geometry("400x400")
app.mainloop()

The first line is to include the Tkinter library. The second line is to create the application. The third is to change the application's dimensions and finally the last line is to put the application as the main loop so that it will stay running.

Create a canvas in Tkinter

Now after that, we have created the empty application. We need to put a canvas on it so that we can draw on it. To create a canvas it is very is, we will use the Canvas function of Tkinter. You can see how to do it in these two lines of code.

          canvas = Canvas(app, bg='black')
canvas.pack(anchor='nw', fill='both', expand=1)

In the first line, I have created the canvas with a black background color. Then in the second line, I packed it in the application but you can see that there are some other parameters that I will talk about now.

There is the anchor is to choose the starting point of the canvas. For that, I put 'nw' for nor-west which means the first point of the canvas will be at the same starting point of the widget which is (0, 0).

And for the fill and expand parameters are to stretch the canvas on the whole area of the application so that we can use the whole size. And even if we change the size of the window, the canvas size will change automatically.

How to put an image in a Canvas

Now it comes the step to put an image in the canvas, for that I'm using pillow library to open the image, resize it and make it ready for a Tkinter application.

Then you should create a canvas image using the function 'create_image' so that you you can draw on it.

Here is the lines of code to do that:

          image = Image.open("image.jpg")
image = image.resize((400,400), Image.ANTIALIAS)
image = ImageTk.PhotoImage(image)
canvas.create_image(0,0, image=image, anchor='nw')

You can see that I did a resizing to the image so that it fits with the canvas (you can check the video, it has more details about that).

Here is the image on the application:

Draw on the image using the mouse

Now comes the final step, after putting the image on the canvas, we need to create two functions for the drawing. The first one is to get the x and y of the first click with the mouse button then the second function will take the coordinate of the previous click with the new click and draw a line. Because to draw a line we need only 2 points, the starting one and the ending one. For that, if we stay clicking at the button and we drag to draw means that we are creating a lot of point with a very small distance between. Using these points we draw lines so that it will be something continuous…

Read more