Hora de desenhar
About this app
Um divertido aplicativo de desenho onde você pode soltar sua criatividade. Sem bugs garantidos!
Hora de desenhar
Related apps
Put this on your site
Source
<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>
NEW APPS
These are apps made by the community!