<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 aplicativo de desenho onde você pode soltar sua criatividade. Sem bugs garantidos!">

    <meta name="keywords" content="desenho, arte, pintura, criatividade">



    <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() {

                // Função para desenhar

                function draw(event) {

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

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

                    var rect = canvas.getBoundingClientRect();

                    var x = event.clientX - rect.left;

                    var y = event.clientY - rect.top;



                    context.fillRect(x, y, 10, 10);

                }



                // Evento de clique no canvas

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

                canvas.addEventListener('mousedown', function(event) {

                    draw(event);

                });



                // Evento de toque no canvas para dispositivos móveis

                canvas.addEventListener('touchstart', function(event) {

                    var touch = event.touches[0];

                    draw(touch);

                });

            });



        } catch (error) {

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

            throw error;

        }

    </script>

    

    <style>

        /* App CSS Goes Here */

        body {

            background-color: #f8f9fa;

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

            margin: 0;

            padding: 0;

        }



        #main-container {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

        }



        #canvas {

            border: 1px solid #ced4da;

            cursor: crosshair;

        }

    </style>

</head>

<body>

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

        <canvas id="canvas" width="800" height="600"></canvas>

    </div>

</body>

</html>