{"id":498,"date":"2018-07-08T12:59:48","date_gmt":"2018-07-08T10:59:48","guid":{"rendered":"http:\/\/pythonprogramming.altervista.org\/?p=498"},"modified":"2018-08-27T07:55:30","modified_gmt":"2018-08-27T05:55:30","slug":"tkinter-with-canvas-rectangle","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/tkinter-with-canvas-rectangle\/","title":{"rendered":"Tkinter with Canvas &#8211; Rectangle"},"content":{"rendered":"<h2>Canvas<\/h2>\n<p>Let&#8217;s take a look at Canvas. With this widget you can draw something on the window. The first thing that we are going to look at is how to create the canvas itself and then how to draw a rectangle in it.<br \/>\n<a href=\"http:\/\/pythonprogramming.altervista.org\/tkinter-with-canvas-rectangle\/canvas\/\" rel=\"attachment wp-att-501\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-501\" src=\"http:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/canvas.png\" alt=\"\" width=\"452\" height=\"295\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/canvas.png 854w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/canvas-320x209.png 320w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/canvas-768x501.png 768w\" sizes=\"auto, (max-width: 452px) 100vw, 452px\" \/><\/a><\/p>\n<h2>Create the Canvas widget<\/h2>\n<p>As usual, we create the window.<\/p>\n<pre class=\"float-enable:true lang:default decode:true\"># window\r\n\r\nimport tkinter as tk\r\n\r\nroot = tk.Tk()\r\n\r\nroot.mainloop()<\/pre>\n<p>And then we add the canvas widget:<\/p>\n<pre class=\"lang:default decode:true \" title=\"The canvas widget istanciation\"># window\r\n\r\nimport tkinter as tk\r\n\r\nroot = tk.Tk()\r\n\r\ncanvas = tk.Canvas(root, width=400, height=400)\r\ncanvas.pack()\r\n\r\nroot.mainloop()<\/pre>\n<p>Now we can draw a rectangle on the canvas, with a code like this:<\/p>\n<pre class=\"lang:default decode:true \" title=\"Create a rectangle in the canvas\"># drawing a rectangle\r\n\r\n# the arguments are coordinates of top left and bottom right vertex\r\n# you give the rectangle a color with the fill parameter\r\ncanvas.create_rectangle(10, 10, 100, 100, fill='blue')<\/pre>\n<p>In the next paragraph, we will see an application of this code to draw rectangles where we click the mouse button.<\/p>\n<p><iframe loading=\"lazy\" title=\"How to draw in Python with tkinter: canvas and rectangles\" width=\"747\" height=\"560\" src=\"https:\/\/www.youtube.com\/embed\/3wGn03mx624?feature=oembed&amp;enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2>Example: drawing rectangles<\/h2>\n<p>With this code, when you click on the window, a rectangle will be created.<\/p>\n<pre><code>import tkinter as tk\r\n\r\nmaster = tk.Tk()\r\n\r\n\r\ndef rectangle(event):\r\n    w.create_rectangle(event.x, event.y, event.x + 10, event.y + 10, fill=\"blue\")\r\n\r\n\r\nw = tk.Canvas(master, width=200, height=200)\r\nw.pack()\r\n\r\nmaster.bind(\"&lt;Button-1&gt;\", rectangle)\r\n\r\nmaster.mainloop()<\/code><\/pre>\n<div style=\"width: 747px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-498-1\" width=\"747\" height=\"467\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/canvas1.mp4?_=1\" \/><a href=\"http:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/canvas1.mp4\">http:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/canvas1.mp4<\/a><\/video><\/div>\n<p>&nbsp;<\/p>\n\t<!----- pubblicit\u00e0-------- vedi h:\\ads\\codice_di_prima.txt per il codice che era qui --------------------->\r\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<!-- Altervista-pythonprogramming-336X280 -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-4189782812829764\"\r\n     data-ad-slot=\"2548661001\"\r\n     data-ad-format=\"auto\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<h4>Tkinter test for students<\/h4>\r\n\r\n\r\n<script>\r\nvar title = \"Tkinter posts\";\r\n\t\tvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-app-to-make-a-different-test-for-every-student-part-1\/\",\"Tk Test Marker I\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-testmaker-part-ii\/\",\"Tk Test Maker II\"],\t\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-tests-app-part-3\/\",\"Tk test Maker III\"]\r\n];\r\n\t\t\r\n\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\r\n\t\r\n\r\n<h4>Tkinter articles<\/h4>\r\n<!-- calculator with memo -->\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/free-calculator-memo-with-tkinter-support-markdown-to-html-saving-too\/\">\r\n<img decoding=\"async\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/03\/calcmemopy_banner.png\" width=\"100%\"><\/a>\r\n<script>\r\nvar title = \"Tkinter posts\";\r\n\t\tvar links = [\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/?p=5719&preview=true\",\"Presentation app with SVG files\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/png-joined-in-one-pdf-files\/\",\"Join png into pdf\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/free-app-imgslide-3-1-slide-images-and-join-them-into-a-pdf\/\",\"ImageSlider 3.1\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-to-show-svg-files-svgslider-1-0\/\",\"SVGSlider 1.0\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/imageslider-3-0-tkinter-app-to-show-images-like-in-a-presentation\/\",\"ImageSlider 3.0\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-shows-an-svg-file\/\",\"SVG in tkinter\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-tests-maker-app-part-iv-add-a-menu-with-tkinter\/\",\"Add a menu with tkinter\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/free-pdf-maker-app-with-python\/\",\"tkinter make pdf\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/calcpy-2-0-the-second-and-final-part-of-calculator\/\",\"Live coding Calculator app part 2\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/split-every-page-in-a-pdf-i-a-different-pdf\/\",\"Split a pdf in different files\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-calculator-from-skratch-part-1-calcpy\/\",\"Calculator from skratch p.1\"], \r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-and-tkinter-fully-working-listbox-to-do-app-for-skratch\/\",\"Tkinter ToDo App\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/copy-and-paste-tkinter-widget-code-app\/\",\"Copy and paste app for tkinter widgets\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/calcdoc-py-a-tkinter-app-to-memorize-operations\/\",\"calcdoc.py: a great calculator memo app\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-calculator-with-memo-of-operations\/\",\"Calculator + list of operations\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-smallest-calculator-ever\/\", \"Smallest calculator\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-gui-with-tkinter-labels-with-text-and-images\/\",\"Labels with images and text\"],\r\n\t[\"https:\/\/pythonprogramming.altervista.org\/a-toolbar-for-python-with-tkinter\/\",\"Toolbar in tkinter\"],\r\n\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-grid-system-how-to-expand-a-button\/\",\"Fit Buttons to the Window\"],\r\n\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-application-launcher-python-gui\/\",\"Tkinter app Laucher\"],\r\n\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-and-how-to-add-an-image-to-a-button\/\", \"Image on a tkinter Button\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-imagebrowser-2-with-canvas\/\", \"Tkinter image browser 2 (canvas)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-image-broswer\/\",\"Tkinter image browser (label)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-to-make-pdf-fast-and-free-with-text-or-html\/\",\"Create PDF with Tkinter Text widget\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-app-to-evaluate-tests-part-1\/\",\"Tkinter App to Evaluate tests\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/simple-presentation-in-pure-python-while-you-learn-tkinter\/\",\"Presentation with Python\/tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-entry-widgets-example-make-a-shuffler-app\/\",\"Tkinter example: entry to shuffle lists\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/move-a-rectangle-with-text-inside-of-it-with-tkinter\/\",\"Moving a text with tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-and-ttk-the-option-menu-widget\/\",\"Tkinter's OptionMenu (and ttk)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-app-to-watch-videos-with-live-coding\/\",\t\t\t\t\t\"Tkinter to watch videos\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/type-reader-app-in-python-pc-read-the-letters-you-type-tkinter\/\",\t\"Type Reader App\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/create-a-new-tkinter-widget-inputbox\/\",\t\t\t\t\t\t\t\"Create your Inputbox\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-open-a-new-window-and-just-one\/\", \t\t\t\t\t\t\"Open only one more window\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/a-simple-test-maker-with-python-and-tkinter\/\", \t\t\t\t\t\"Test maker with tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/my-personal-notepad-toggle-tkinter-fullscreen\/\",\t\t\t\t\t\"Ebook maker with tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-and-listbox-1\/\", \t\t\t\t\t\t\t\t\t\t\t\"Tkinter & listbox 2019 - 1\"],\r\n['https:\/\/pythonprogramming.altervista.org\/tkinter-using-a-gui-graphic-user-interface-with-python-part-1\/', \t'Create a window'],\r\n['https:\/\/pythonprogramming.altervista.org\/tkinter-to-make-a-window-video-1\/', \t\t\t\t\t\t\t\t'Create a window part 2'],\r\n[\"https:\/\/pythonprogramming.altervista.org\/create-more-windows-with-tkinter\/\",\t\t\t\t\t\t\t\t\"More windows tkinter!\"],\r\n['https:\/\/pythonprogramming.altervista.org\/tkinter-part-2-binding\/', \t\t\t\t\t\t\t\t\t\t'Binding functions to key\/button '],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/all-tkinter-posts\/\",\">>>ALL TKINTER POSTS>>>\"]\r\n\t\t];\r\n\t\t\r\n\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"The use of the canvas widget in tkinter. How to draw a rectangle in it. A little example of &#8216;real code&#8217;.\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/tkinter-with-canvas-rectangle\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":501,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[49],"tags":[145,4,146,51],"class_list":["post-498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tkinter","tag-canvas","tag-python","tag-rectangle","tag-tkinter"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":false,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=498"}],"version-history":[{"count":8,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/498\/revisions"}],"predecessor-version":[{"id":559,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/498\/revisions\/559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/501"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}