import tkinter as tk
from tkinter import colorchooser

# グローバル変数
sx, sy = 0, 0
color = 'black'

# ハンドラ関数
def on_pressed(event):
  global sx, sy
  sx, sy = event.x, event.y
  canvas_1.create_oval(sx, sy, sx, sy,
                       outline=color,
                       width=scale_1.get())

def on_dragged(event):
  global sx, sy
  canvas_1.create_line(sx, sy, event.x, event.y,
                       fill=color,
                       width=scale_1.get())
  sx, sy = event.x, event.y

def change_color():
  global color
  c = colorchooser.askcolor()
  if c[1] == None: return
  color = c[1]
  canvas_2['background'] = c[1]
  change_pen(scale_1.get())

def change_pen(value): 
  canvas_3.delete('all')
  canvas_3.create_rectangle(0, 0, 20, 20,
                            fill='white')
  size = float(value) / 2
  canvas_3.create_oval(10-size, 10-size,
                       10+size, 10+size,
                       outline=color,
                       fill=color,
                       width=1)

# トップレベルウインドウの生成
root = tk.Tk()
root.title('Drawing App')
root.geometry('300x330')

# Canvasウィジェットの生成
canvas_1 = tk.Canvas(
  root,
  background='white')
canvas_1.bind('<ButtonPress-1>', on_pressed)
canvas_1.bind('<Button1-Motion>', on_dragged)

canvas_2 = tk.Canvas(
  root,
  width=40,
  height=20,
  background='black')

canvas_3 = tk.Canvas(
  root,
  width=20,
  height=20)

# Buttonウィジェットの生成
button_1 = tk.Button(
  root,
  text='Color Select',
  command=change_color)

# Scaleウィジェットの生成
scale_1 = tk.Scale(
  root,
  orient=tk.HORIZONTAL,
  from_=1,
  to=10,
  command=change_pen) 

change_pen(5.0)   # ペンを初期値に設定

# 4列の割合を指定
for i in range(4):
  root.columnconfigure(i, weight=1)

# 2行目の割合を指定
# （1行目のCanvasはグリッド側に合わせる）
root.rowconfigure(1, weight=1)

canvas_1.grid(column=0, row=0, columnspan=4)
button_1.grid(column=0, row=1)
canvas_2.grid(column=1, row=1)
scale_1.grid(column=2, row=1)
canvas_3.grid(column=3, row=1)

root.mainloop()