Drawing App
About this app
A fun drawing app with different levels.
Drawing App 🎨 Drawing App 🎨 Next Level
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">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Drawing App</title>
<meta name="description" content="A fun drawing app with different levels.">
<meta name="keywords" content="drawing, app, web, html, canvas">
<style>
body {font-family: 'Comic Sans MS', sans-serif; background: #F5F5F5; color: #333;}
#canvas {border: 1px solid #000;}
#level {margin-top: 20px;}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>🎨 Drawing App 🎨</h1>
<canvas id="canvas" width="500" height="500"></canvas>
<button id="next-level">Next Level</button>
<div id="level"></div>
</div>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var drawing = false;
var levels = ["ROCKER", "CRUICAL", "9", "MANTA RAY", "PATCHY", "1996", "624", "1995", "CALIFORNIA", "SHAOLIN"];
var currentLevel = 0;
canvas.addEventListener('mousedown', function(e) {
drawing = true;
draw(e);
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', function() {
drawing = false;
ctx.beginPath();
});
document.getElementById('next-level').addEventListener('click', nextLevel);
function draw(e) {
if(!drawing) return;
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = '#000';
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
function nextLevel() {
if(currentLevel < levels.length - 1) {
currentLevel++;
document.getElementById('level').innerText = 'Level ' + (currentLevel + 1) + ': Draw ' + levels[currentLevel];
ctx.clearRect(0, 0, canvas.width, canvas.height);
} else {
alert('You have completed all levels!');
}
}
nextLevel();
</script>
</body>
</html>
NEW APPS
These are apps made by the community!