Drawing App
About this app
A simple drawing app.
Drawing App 🖌️ Draw 🧽 Erase 🟥 Rectangle ⚫ Circle 🌊 Fill Color: Text: Add Text
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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Drawing App</title>
<meta name="description" content="A simple drawing app.">
<meta name="keywords" content="drawing, web app, HTML, JavaScript">
<style>
/* App CSS Goes Here */
body {
background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
font-family: 'Comic Sans MS', cursive, sans-serif;
}
#main-container {
position: relative;
height: 90vh;
background: #fff;
margin-top: 5vh;
padding: 20px;
border-radius: 15px;
}
#canvas {
border: 1px solid #000;
cursor: crosshair;
}
.tool {
margin: 10px;
cursor: pointer;
}
.selected {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
<canvas id="canvas" width="800" height="600"></canvas>
<div id="tools">
<div id="draw" class="tool selected">🖌️ Draw</div>
<div id="erase" class="tool">🧽 Erase</div>
<div id="rectangle" class="tool">🟥 Rectangle</div>
<div id="circle" class="tool">⚫ Circle</div>
<div id="fill" class="tool">🌊 Fill</div>
</div>
<div>
<label for="color">Color: </label>
<input type="color" id="color" value="#000000">
</div>
<div>
<label for="text">Text: </label>
<input type="text" id="text">
<button id="textButton">Add Text</button>
</div>
</div>
</body>
<script>
document.addEventListener("DOMContentLoaded", function() {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let painting = document.getElementById('paint');
let paint_style = getComputedStyle(painting);
canvas.width = parseInt(paint_style.getPropertyValue('width'));
canvas.height = parseInt(paint_style.getPropertyValue('height'));
let mouse = {x: 0, y: 0};
canvas.addEventListener('mousemove', function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
ctx.lineWidth = 3;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#00CC99';
canvas.addEventListener('mousedown', function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);
var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};
});
</script>
</html>
NEW APPS
These are apps made by the community!