<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1">



    <title>Hora de Desenhar</title>

    <meta name="description" content="Um divertido app de desenhar">

    <meta name="keywords" content="desenhar, app, colorir">



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



    <script type="text/javascript">

        try {

            // App Javascript Goes Here. Place your entire script content inside the try block for error handling.

            document.addEventListener("DOMContentLoaded", function() {

                // Get the canvas element

                var canvas = document.getElementById("canvas");

                var context = canvas.getContext("2d");

                var isDrawing = false;

                var color = "#000000";



                // Set canvas size

                canvas.width = window.innerWidth;

                canvas.height = window.innerHeight;



                // Function to start drawing

                function startDrawing(event) {

                    isDrawing = true;

                    context.beginPath();

                    context.moveTo(event.clientX, event.clientY);

                }



                // Function to draw

                function draw(event) {

                    if (!isDrawing) return;

                    context.lineTo(event.clientX, event.clientY);

                    context.strokeStyle = color;

                    context.lineWidth = 5;

                    context.stroke();

                }



                // Function to stop drawing

                function stopDrawing() {

                    isDrawing = false;

                }



                // Event listeners for drawing

                canvas.addEventListener("mousedown", startDrawing);

                canvas.addEventListener("mousemove", draw);

                canvas.addEventListener("mouseup", stopDrawing);

                canvas.addEventListener("mouseout", stopDrawing);



                // Button event listeners

                $("#btn-colors").click(function() {

                    // Show color picker

                    $("#color-picker").trigger("click");

                });



                $("#color-picker").change(function() {

                    // Set the selected color

                    color = $(this).val();

                });



                $("#btn-finish").click(function() {

                    // Save the drawing as an image

                    var image = canvas.toDataURL("image/png");

                    var link = document.createElement("a");

                    link.href = image;

                    link.download = "my_drawing.png";

                    link.click();

                });



                $("#btn-clear").click(function() {

                    // Clear the canvas

                    context.clearRect(0, 0, canvas.width, canvas.height);

                });

            });



        } catch (error) {

             // This will throw the error to the parent window.

            throw error;

        }

    </script>



    <style>

        /* App CSS Goes Here */

        body {

            margin: 0;

            padding: 0;

            overflow: hidden;

            background-color: #f5f5f5;

            font-family: 'Arial', sans-serif;

        }



        #canvas {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            cursor: crosshair;

        }



        #controls {

            position: absolute;

            top: 20px;

            left: 20px;

        }



        .btn {

            margin-bottom: 10px;

        }



        #color-picker {

            display: none;

        }

    </style>

</head>

<body>

    <div id="main-container" class="container">

        <canvas id="canvas"></canvas>

        <div id="controls">

            <button id="btn-colors" class="btn btn-primary"><i class="fa fa-paint-brush"></i> Cores</button>

            <button id="btn-finish" class="btn btn-success"><i class="fa fa-check"></i> Terminar</button>

            <button id="btn-clear" class="btn btn-danger"><i class="fa fa-trash"></i> Apagar</button>

        </div>

        <input type="color" id="color-picker">

    </div>

</body>

</html>