Web Drawing App
How to Create an Online Paint Website – Step‑by‑Step Guide
Build a fully functional drawing app with HTML5 Canvas, CSS, and JavaScript. Users can draw, choose colors, adjust brush size, erase, clear, and save their artwork – no libraries required.
Table of Contents
Step 1
Set Up the HTML Canvas
We'll use the <canvas> element to create a drawing surface. The HTML structure includes a toolbar for tools and a container for the canvas.
index.html – Canvas Setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Paint</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app">
<div class="toolbar">
<input type="color" id="colorPicker" value="#000000">
<input type="range" id="brushSize" min="1" max="30" value="4">
<button id="eraserBtn">🧹 Eraser</button>
<button id="clearBtn">🗑️ Clear</button>
<button id="saveBtn">💾 Save</button>
</div>
<canvas id="paintCanvas"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
This gives us a color picker, a brush size slider, an eraser toggle, and clear/save buttons. The canvas will be styled with CSS to fill the screen.
Step 2
Style the Paint App with CSS
Make the toolbar sticky at the top, and let the canvas occupy the remaining viewport. Use modern, minimal styling.
style.css
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
.toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
background: #f8f9fa;
border-bottom: 1px solid #e5e7eb;
flex-wrap: wrap;
z-index: 10;
}
.toolbar input[type="color"] {
width: 40px;
height: 40px;
border: none;
cursor: pointer;
border-radius: 8px;
}
.toolbar input[type="range"] {
width: 100px;
}
.toolbar button {
padding: 8px 16px;
background: white;
border: 1px solid #d1d5db;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: background 0.2s;
}
.toolbar button:hover {
background: #f3f4f6;
}
.toolbar button.active {
background: #7C3AED;
color: white;
border-color: #7C3AED;
}
canvas {
flex: 1;
display: block;
width: 100%;
cursor: crosshair;
}
This CSS makes the toolbar clean and responsive. The canvas automatically stretches to fill the space.
Step 3
Implement Drawing with JavaScript
The core drawing logic uses mouse/touch events on the canvas. We track mouse movements and draw lines between points.
script.js – Drawing Logic
const canvas = document.getElementById('paintCanvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const brushSize = document.getElementById('brushSize');
const eraserBtn = document.getElementById('eraserBtn');
const clearBtn = document.getElementById('clearBtn');
const saveBtn = document.getElementById('saveBtn');
let painting = false;
let erasing = false;
function startPosition(e) {
painting = true;
draw(e);
}
function endPosition() {
painting = false;
ctx.beginPath(); // reset path
}
function draw(e) {
if (!painting) return;
ctx.lineWidth = brushSize.value;
ctx.lineCap = 'round';
ctx.strokeStyle = erasing ? '#FFFFFF' : colorPicker.value;
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width; // scale for high DPI
const scaleY = canvas.height / rect.height;
const x = (e.clientX - rect.left) * scaleX;
const y = (e.clientY - rect.top) * scaleY;
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
function resizeCanvas() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Mouse events
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mousemove', draw);
// Touch events for mobile
canvas.addEventListener('touchstart', (e) => { e.preventDefault(); startPosition(e.touches[0]); });
canvas.addEventListener('touchend', endPosition);
canvas.addEventListener('touchmove', (e) => { e.preventDefault(); draw(e.touches[0]); });
The canvas uses high‑DPI scaling to keep drawings sharp on all screens. Touch support makes it work on phones and tablets.
Step 4
Add Eraser, Clear, and Save Features
Now let's wire up the toolbar buttons. The eraser simply draws with white, clear resets the canvas, and save downloads the image.
Tool Actions
// Eraser toggle
eraserBtn.addEventListener('click', () => {
erasing = !erasing;
eraserBtn.classList.toggle('active', erasing);
});
// Clear canvas
clearBtn.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
// Save as PNG
saveBtn.addEventListener('click', () => {
const link = document.createElement('a');
link.download = 'my-painting.png';
link.href = canvas.toDataURL();
link.click();
});
Now your online paint app is fully functional! Open the HTML file in a browser and start drawing.
Pro Tip
You can add more brushes (circle, spray), undo/redo by storing canvas states, or fill tool using flood fill algorithm. The canvas API is extremely powerful.
Step 5
Complete Source Code (Single HTML File)
Here's everything combined into one file. Just copy, save as paint.html, and open in any modern browser.
paint.html (Complete)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Paint</title>
<style>
body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; }
.app { display: flex; flex-direction: column; height: 100vh; }
.toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: #f8f9fa; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; z-index: 10; }
.toolbar input[type="color"] { width: 40px; height: 40px; border: none; cursor: pointer; border-radius: 8px; }
.toolbar input[type="range"] { width: 100px; }
.toolbar button { padding: 8px 16px; background: white; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; font-weight: 500; transition: background 0.2s; }
.toolbar button:hover { background: #f3f4f6; }
.toolbar button.active { background: #7C3AED; color: white; border-color: #7C3AED; }
canvas { flex: 1; display: block; width: 100%; cursor: crosshair; }
</style>
</head>
<body>
<div class="app">
<div class="toolbar">
<input type="color" id="colorPicker" value="#000000">
<input type="range" id="brushSize" min="1" max="30" value="4">
<button id="eraserBtn">🧹 Eraser</button>
<button id="clearBtn">🗑️ Clear</button>
<button id="saveBtn">💾 Save</button>
</div>
<canvas id="paintCanvas"></canvas>
</div>
<script>
const canvas = document.getElementById('paintCanvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const brushSize = document.getElementById('brushSize');
const eraserBtn = document.getElementById('eraserBtn');
const clearBtn = document.getElementById('clearBtn');
const saveBtn = document.getElementById('saveBtn');
let painting = false;
let erasing = false;
function startPosition(e) { painting = true; draw(e); }
function endPosition() { painting = false; ctx.beginPath(); }
function draw(e) {
if (!painting) return;
ctx.lineWidth = brushSize.value;
ctx.lineCap = 'round';
ctx.strokeStyle = erasing ? '#FFFFFF' : colorPicker.value;
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const x = (e.clientX - rect.left) * scaleX;
const y = (e.clientY - rect.top) * scaleY;
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
function resizeCanvas() { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; }
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('touchstart', (e) => { e.preventDefault(); startPosition(e.touches[0]); });
canvas.addEventListener('touchend', endPosition);
canvas.addEventListener('touchmove', (e) => { e.preventDefault(); draw(e.touches[0]); });
eraserBtn.addEventListener('click', () => { erasing = !erasing; eraserBtn.classList.toggle('active', erasing); });
clearBtn.addEventListener('click', () => ctx.clearRect(0, 0, canvas.width, canvas.height));
saveBtn.addEventListener('click', () => { const link = document.createElement('a'); link.download = 'my-painting.png'; link.href = canvas.toDataURL(); link.click(); });
</script>
</body>
</html>
That's it! You have a fully working online paint website.
Step 6
Deploy Your Paint Website for Free
You can host this single HTML file on any static hosting:
- GitHub Pages – push it to a repository and enable Pages.
- Netlify Drop – drag & drop the file.
- Vercel – similar, with custom domain support.
Share the link with friends, or embed it in your portfolio. It's 100% free and works everywhere.
Checklist
Launch Checklist
- Canvas renders correctly and responds to mouse/touch
- Color picker and brush size work
- Eraser toggles on/off and draws white
- Clear button resets the canvas
- Save button downloads a PNG file
- Responsive design tested on mobile
- Deployed to a public URL
Key Takeaways
Canvas element enables 2D drawing
Mouse/Touch events control strokes
Simple toolbar with color & size
Eraser = white ink toggle
Save canvas as PNG via toDataURL
Works on mobile with touch events
🎨 Start Drawing! Your Online Paint App Is Ready
Copy the complete code, save it as an HTML file, and launch your own drawing tool. Customize it, add new features, and share it with the world.
Join the tech debate...
We love a good discussion, but please keep it respectful and relevant to the topic. Vulgarity, personal attacks, and spam will be removed. Let’s keep the community smart, helpful, and welcoming to all tech fans!