PHP Drawing Canvas & Sketch Pad
Build a browser-based drawing app with brush tools, colors, and the ability to save sketches to the server via PHP.
PHPCanvasJavaScriptDrawing
Overview
Create a full-featured drawing application using HTML5 Canvas. Users can draw, pick colors, adjust brush sizes, and save artwork to the server via PHP.
index.php
php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sketch Pad</title>
<style>
body { margin: 0; background: #1a1a2e; display: flex; flex-direction: column; align-items: center; color: #fff; font-family: sans-serif; }
.toolbar { display: flex; gap: 1rem; padding: 1rem; background: #16213e; width: 100%; justify-content: center; align-items: center; }
canvas { border: 2px solid #6c63ff; border-radius: 8px; cursor: crosshair; margin: 1rem; }
button { padding: 8px 20px; background: #6c63ff; color: #fff; border: none; border-radius: 8px; cursor: pointer; }
input[type=color] { width: 40px; height: 40px; border: none; border-radius: 8px; }
input[type=range] { accent-color: #6c63ff; }
</style>
</head>
<body>
<div class="toolbar">
<label>Color: <input type="color" id="color" value="#ffffff"></label>
<label>Size: <input type="range" id="size" min="1" max="50" value="4"></label>
<button onclick="eraser=!eraser">Eraser</button>
<button onclick="ctx.fillStyle='#0a0a23';ctx.fillRect(0,0,800,500)">Clear</button>
<button onclick="saveDrawing()">Save</button>
</div>
<canvas id="canvas" width="800" height="500"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let drawing = false, eraser = false;
ctx.fillStyle = '#0a0a23'; ctx.fillRect(0, 0, 800, 500);
ctx.lineCap = 'round'; ctx.lineJoin = 'round';
canvas.addEventListener('mousedown', e => { drawing = true; ctx.beginPath(); ctx.moveTo(e.offsetX, e.offsetY); });
canvas.addEventListener('mousemove', e => {
if (!drawing) return;
ctx.strokeStyle = eraser ? '#0a0a23' : document.getElementById('color').value;
ctx.lineWidth = document.getElementById('size').value;
ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke();
});
canvas.addEventListener('mouseup', () => drawing = false);
canvas.addEventListener('mouseleave', () => drawing = false);
async function saveDrawing() {
const data = canvas.toDataURL('image/png');
await fetch('save.php', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({image: data}) });
}
</script>
</body>
</html>Save Handler (save.php)
php
<?php
header('Content-Type: application/json');
$input = json_decode(file_get_contents('php://input'), true);
$data = $input['image'] ?? '';
if (preg_match('/^data:image\/png;base64,/', $data)) {
$data = base64_decode(preg_replace('/^data:image\/png;base64,/', '', $data));
$filename = 'sketches/' . date('Y-m-d_H-i-s') . '_' . uniqid() . '.png';
@mkdir('sketches', 0755, true);
file_put_contents($filename, $data);
echo json_encode(['success' => true, 'file' => $filename]);
} else {
http_response_code(400);
echo json_encode(['error' => 'Invalid image data']);
}
?>Technologies
- PHP — base64 image saving, file management - HTML5 Canvas — drawing API - JavaScript — brush tools, eraser, save
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!