Building a Simple Flask App with a Drawing Canvas

In this unit, you will take your first steps toward building a web app that can recognize what you draw. If you have ever used a drawing app or played with AI that guesses your doodles, you already have an idea of what we are aiming for. Here, you will learn how to set up the basic structure of such an app using Flask, a popular web framework for Python.

You will learn how to:

• Set up a simple Flask application that serves a web page.
• Create a basic HTML template with a drawing canvas using the <canvas> element.
• Connect your Python backend to your web page so you can later add drawing recognition features.
• Prepare your app to handle user drawings and send them to the backend for processing.

Here is a quick look at the kind of code you will be working with:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
    return render_template('index.html')

And the HTML template:

<canvas id="canvas" width="280" height="280"></canvas>

But soon, you’ll be adding more! For example, you’ll learn how to let users draw on the canvas and send their drawing to the backend:

<form method="POST" onsubmit="return submitCanvas();">
    <canvas id="canvas" width="280" height="280"></canvas>
    <input type="hidden" name="image" id="imageData">
    <button type="submit">Guess!</button>
</form>

And in your Flask route, you’ll be able to receive and process the drawing:

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        img_data = request.form['image']
        # process the image data here
    return render_template('index.html')

You’ll also see how to display the AI’s guess and confidence right on the page:

{% if prediction is not none %}
    <h3>AI Guess: {{ prediction }}</h3>
    <p>Confidence: {{ confidence|round(2) }}%</p>
{% endif %}

Building a web app that can recognize your drawings is a great way to combine web development and artificial intelligence. By the end of this unit, you will have a working web page with a drawing area — ready for you to add more advanced features. This is a practical skill that is used in many real-world applications, from educational tools to creative games.

Let’s get started and build the first piece of your drawing recognition app!