⭐ Click the star in your address bar to bookmark this page ×
Home Creative Tools Drawing App

Online Drawing App — Draw, Sketch & Create Digital Art Free

Draw and sketch directly in your browser with pen, eraser, line, rectangle, and circle tools. Colour picker, opacity control, unlimited undo, and PNG download. Works on desktop and touch devices.

✓ Free Forever✓ No Signup✓ Touch & Stylus Support✓ PNG Download
4px
100%
Quick colours:

Ctrl+Z to undo · Scroll to zoom (desktop)

What You Can Create with the ToolsVenue Drawing App

The browser-based drawing canvas supports a wide range of creative and practical use cases — from quick wireframes to polished sketches. Unlike heavyweight design tools that require installation, accounts, or subscriptions, this drawing app runs entirely in your browser with zero friction.

Quick diagrams and wireframes: Sketch a website layout, a flowchart, or a system architecture diagram in minutes. Use the rectangle and line tools to create boxes and arrows, and freehand pen for labels and annotations. Download the PNG and drop it into a design brief, presentation, or team chat.

Digital sketching and illustration: Create freehand drawings, character sketches, or concept art directly in the browser. The opacity control allows layered shading effects, and the 12-colour quick palette provides a starting set for colour work.

Handwriting and annotation: Use the drawing canvas to write notes, annotate screenshots (paste an image as a background using a second canvas layer), or create handwritten graphics for social media.

Teaching and presentations: Draw diagrams in real time during a presentation or video call by sharing your screen with the drawing canvas open. The full-screen canvas with white background is clean and readable.

Drawing Tools and How to Use Them

Pen tool (✏️): Freehand drawing. Click and drag to create smooth, continuous strokes. Adjust brush size (1–40 px) and opacity (10–100%) for fine lines or broad, translucent strokes. The pen uses anti-aliased rendering for smooth edges.

Eraser tool (🧹): Removes drawn content by making pixels transparent. The eraser operates at twice the set brush size for efficient area clearing. Because it creates transparency, the canvas background shows through erased areas — the background colour you chose remains visible.

Line tool (📏): Draws a perfectly straight line from click point to release point. Click, hold, drag to the endpoint, then release. A preview of the line is shown while dragging.

Rectangle tool (⬜): Draws a rectangle from the start point to the release point. Enable 'Fill shapes' to produce a filled rectangle. Hold Shift (on desktop) while dragging for additional control.

Circle / Ellipse tool (⭕): Draws an ellipse that fits within the bounding box you drag. Enable 'Fill shapes' for a solid circle. The shape preview updates as you drag, so you can see the proportions before releasing.

Keyboard Shortcuts and Touch Controls

Ctrl+Z (Cmd+Z on Mac): Undo the last stroke or shape. Up to 40 undo states are stored per session.

Touch drawing: On mobile and tablet, use your finger to draw. Touch events are mapped to the same drawing functions as mouse events. The canvas disables page scrolling while your finger is on it.

Stylus support: The app supports pointer events, including stylus input on iPad with Apple Pencil, Android with S-Pen, and Microsoft Surface with Surface Pen. The drawing is pressure-agnostic but responds accurately to stylus position.

The canvas automatically resizes to fit its container on window resize, scaling the existing drawing proportionally to the new dimensions.

How to Use the Drawing App

1

Select a tool

Click the Pen for freehand drawing, Eraser to remove content, or one of the shape tools (Line, Rectangle, Circle) for geometric shapes.

2

Set your brush style

Choose a colour from the quick palette or use the colour picker for any custom colour. Adjust brush size and opacity with the sliders.

3

Draw on the canvas

Click and drag to draw. For shape tools, the preview updates as you drag so you can see proportions before releasing. Press Ctrl+Z to undo any stroke.

4

Download your artwork

Click Download PNG to save your drawing as a PNG file. Files are downloaded immediately to your device.

Features

✏️

5 Drawing Tools

Pen, eraser, straight line, rectangle, and circle/ellipse.

🎨

Colour Control

12-colour quick palette plus full colour picker for any colour.

🔆

Opacity Slider

10%–100% opacity for layered, translucent effects.

Unlimited Undo

40 undo states per session — Ctrl+Z or the Undo button.

📱

Touch & Stylus

Works on mobile, tablet, and stylus-equipped devices.

PNG Download

Save your drawing as a transparent-capable PNG file.

Frequently Asked Questions

Does this work on iPhone and iPad?
Yes. The canvas is fully touch-enabled. Draw with your finger or Apple Pencil on iPad. The canvas disables page scrolling while you draw, and touch events map accurately to drawing positions on all screen sizes.
Can I use a stylus?
Yes. The app supports pointer events including Apple Pencil (iPad), Samsung S-Pen, and Microsoft Surface Pen. Stylus pressure is not currently mapped to brush size, but position accuracy is fully supported.
Is my drawing saved automatically?
No — drawings exist only in your current browser session. Click Download PNG to save your work to your device. Closing or refreshing the tab will erase the drawing.
What format does the download use?
PNG (Portable Network Graphics) — lossless, widely compatible, and supports transparency. The PNG can be opened in any image editor, imported into Figma, Canva, Word, Google Docs, or most design tools.
How many times can I undo?
Up to 40 stroke states are stored. Each completed stroke (from pen-down to pen-up) is one undo state. Press Ctrl+Z or click Undo to step back one stroke at a time.

Useful References

📖

MDN Canvas API

Technical reference for the HTML5 Canvas

🎨

Figma

Professional browser-based design tool

✏️

Excalidraw

Collaborative whiteboard tool

< script > const daCanvas = document.getElementById('da-canvas'); const daCtx = daCanvas.getContext('2d'); let daCurrTool = 'pen'; let daIsDrawing = false; let daStartX = 0, daStartY = 0; let daHistory = []; let daHistoryIdx = -1; let daBg = '#ffffff'; const DA_COLOURS = ['#111827', '#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899', '#ffffff', '#9ca3af', '#6b7280', '#374151']; function daInit() { const w = daCanvas.parentElement.clientWidth - 28; daCanvas.width = Math.max(400, w); daCanvas.height = Math.min(450, Math.round(w * 0.6)); daSetBg('#ffffff'); daSave(); // palette const pal = document.getElementById('da-palette'); DA_COLOURS.forEach(c => { const b = document.createElement('div'); b.style.cssText = `width:22px;height:22px;background:${c};border-radius:4px;cursor:pointer;border:2px solid ${c==='#ffffff'?'#d1d5db':'transparent'};flex-shrink:0;`; b.onclick = () => { document.getElementById('da-color').value = c; }; b.title = c; pal.appendChild(b); }); } function daGetPos(e) { const rect = daCanvas.getBoundingClientRect(); const scaleX = daCanvas.width / rect.width, scaleY = daCanvas.height / rect.height; if (e.touches) { return { x: (e.touches[0].clientX - rect.left) * scaleX, y: (e.touches[0].clientY - rect.top) * scaleY }; } return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY }; } function daStyleCtx() { daCtx.strokeStyle = document.getElementById('da-color').value; daCtx.lineWidth = parseInt(document.getElementById('da-size').value); daCtx.globalAlpha = parseInt(document.getElementById('da-opacity').value) / 100; daCtx.lineCap = 'round'; daCtx.lineJoin = 'round'; if (daCurrTool === 'eraser') { daCtx.strokeStyle = 'transparent'; daCtx.globalCompositeOperation = 'destination-out'; daCtx.lineWidth = parseInt(document.getElementById('da-size').value) * 2; } else { daCtx.globalCompositeOperation = 'source-over'; } } daCanvas.addEventListener('mousedown', daStart); daCanvas.addEventListener('mousemove', daMove); daCanvas.addEventListener('mouseup', daEnd); daCanvas.addEventListener('mouseleave', daEnd); daCanvas.addEventListener('touchstart', e => { e.preventDefault(); daStart(e); }, { passive: false }); daCanvas.addEventListener('touchmove', e => { e.preventDefault(); daMove(e); }, { passive: false }); daCanvas.addEventListener('touchend', e => { e.preventDefault(); daEnd(e); }, { passive: false }); document.addEventListener('keydown', e => { if ((e.ctrlKey || e.metaKey) && e.key === 'z') { e.preventDefault(); daUndo(); } }); let daSnapshot = null; function daStart(e) { daIsDrawing = true; const pos = daGetPos(e); daStartX = pos.x; daStartY = pos.y; daStyleCtx(); if (daCurrTool === 'pen' || daCurrTool === 'eraser') { daCtx.beginPath(); daCtx.moveTo(pos.x, pos.y); } else { daSnapshot = daCtx.getImageData(0, 0, daCanvas.width, daCanvas.height); } } function daMove(e) { if (!daIsDrawing) return; const pos = daGetPos(e); daStyleCtx(); if (daCurrTool === 'pen' || daCurrTool === 'eraser') { daCtx.lineTo(pos.x, pos.y); daCtx.stroke(); } else { daCtx.putImageData(daSnapshot, 0, 0); const fill = document.getElementById('da-fill').checked; daCtx.beginPath(); if (daCurrTool === 'line') { daCtx.moveTo(daStartX, daStartY); daCtx.lineTo(pos.x, pos.y); daCtx.stroke(); } else if (daCurrTool === 'rect') { const w = pos.x - daStartX, h = pos.y - daStartY; if (fill) { daCtx.fillStyle = daCtx.strokeStyle; daCtx.fillRect(daStartX, daStartY, w, h); } daCtx.strokeRect(daStartX, daStartY, w, h); } else if (daCurrTool === 'circle') { const rx = Math.abs(pos.x - daStartX) / 2, ry = Math.abs(pos.y - daStartY) / 2; const cx = Math.min(daStartX, pos.x) + rx, cy = Math.min(daStartY, pos.y) + ry; daCtx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2); if (fill) { daCtx.fillStyle = daCtx.strokeStyle; daCtx.fill(); } daCtx.stroke(); } } } function daEnd() { if (daIsDrawing) { daIsDrawing = false; daCtx.globalAlpha = 1; daCtx.globalCompositeOperation = 'source-over'; daSave(); } } function daSave() { daHistory = daHistory.slice(0, daHistoryIdx + 1); daHistory.push(daCtx.getImageData(0, 0, daCanvas.width, daCanvas.height)); if (daHistory.length > 40) daHistory.shift(); daHistoryIdx = daHistory.length - 1; } function daUndo() { if (daHistoryIdx > 0) { daHistoryIdx--; daCtx.putImageData(daHistory[daHistoryIdx], 0, 0); } } function daTool(t) { daCurrTool = t; document.querySelectorAll('[id^="da-tool-"]').forEach(b => { b.style.borderColor = '#e5e7eb'; b.style.background = '#fff'; }); const btn = document.getElementById('da-tool-' + t); if (btn) { btn.style.borderColor = '#4f52e8'; btn.style.background = '#eff6ff'; } } function daSetBg(c) { daBg = c; const img = daCtx.getImageData(0, 0, daCanvas.width, daCanvas.height); daCtx.fillStyle = c; daCtx.fillRect(0, 0, daCanvas.width, daCanvas.height); daCtx.putImageData(img, 0, 0); daCanvas.style.background = c; } function daClear() { daCtx.fillStyle = daBg; daCtx.fillRect(0, 0, daCanvas.width, daCanvas.height); daSave(); } function daDownload() { const a = document.createElement('a'); a.download = 'toolsvenue-drawing.png'; a.href = daCanvas.toDataURL('image/png'); a.click(); } window.addEventListener('load', daInit); window.addEventListener('resize', () => { const saved = daCtx.getImageData(0, 0, daCanvas.width, daCanvas.height); const w = daCanvas.parentElement.clientWidth - 28; daCanvas.width = Math.max(400, w); daCanvas.height = Math.min(450, Math.round(w * 0.6)); daCtx.fillStyle = daBg; daCtx.fillRect(0, 0, daCanvas.width, daCanvas.height); daCtx.putImageData(saved, 0, 0); }); < /script>