AI Drawing Guess App
About this app
A fun drawing app where an AI tries to guess what you drew.
AI Drawing Guess App Choose Color
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<title>AI Drawing Guess App</title>
<meta name="description" content="A fun drawing app where an AI tries to guess what you drew.">
<meta name="keywords" content="drawing, AI, fun, interactive, guess">
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #ff9966, #ff5e62);
}
canvas {
border: 1px solid black;
}
</style>
<script type="text/javascript">
try {
let canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false;
let x = "black", y = 2;
function init() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
}
function color(obj) {
switch (obj.id) {
case "green":
x = "green";
break;
case "blue":
x = "blue";
break;
case "red":
x = "red";
break;
case "yellow":
x = "yellow";
break;
case "orange":
x = "orange";
break;
case "black":
x = "black";
break;
case "white":
x = "white";
break;
}
if (x == "white") y = 14;
else y = 2;
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
} catch (error) {
throw error;
}
</script>
</head>
<body onload="init()">
<canvas id="can" width="400" height="400" style="position:absolute;top:5%;left:5%;border:2px solid;"></canvas>
<div style="position:absolute;top:5%;left:43%;">Choose Color</div>
<div style="position:absolute;top:15%;left:43%;">
<img id="green" src="https://via.placeholder.com/20/008000" onclick="color(this)"></img>
<img id="blue" src="https://via.placeholder.com/20/0000FF" onclick="color(this)"></img>
<img id="red" src="https://via.placeholder.com/20/FF0000" onclick="color(this)"></img>
<img id="yellow" src="https://via.placeholder.com/20/FFFF00" onclick="color(this)"></img>
<img id="orange" src="https://via.placeholder.com/20/FFA500" onclick="color(this)"></img>
<img id="black" src="https://via.placeholder.com/20/000000" onclick="color(this)"></img>
<img id="white" src="https://via.placeholder.com/20/FFFFFF" onclick="color(this)"></img>
</div>
<input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:43%;">
<input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:60%;left:43%;">
</body>
</html>
NEW APPS
These are apps made by the community!