<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Graphische Datenverarbeitung - 2D - Fillscreen</title>
    <link rel="icon" type="image/png" href="ai-logo.png">
    <script type="text/javascript" src="fillscreen.bundle.js"></script>
</head>

<body>
    <nav class="navbar navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/index.html">
                <img src="ai-logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
                Graphische Datenverarbeitung
            </a>
            <div class="navbar-brand">Fillscreen</div>
        </div>
    </nav>
    <br>
    <div class="container">
        <div class="row">
            <figure class="figure col-sm-6">
                <canvas id="result" class="figure-img mx-auto d-block" width="300" height="300"></canvas>
                <figcaption class="figure-caption text-center">
                    Fill the screen with a single RGBA color #FF0000FF (red).
                </figcaption>
            </figure>
            <figure class="col-sm-6 figure">
                <img class="figure-img mx-auto d-block" src="fillscreen-finished.png">
                <figcaption class="figure-caption text-center">Reference image</figcaption>
            </figure>
        </div>
    </div>
</body>

</html>