Live Drawing Board - Online Freehand Sketch & Save
A beautiful full‑screen drawing canvas with variable brush sizes, colors, and an eraser. Export your sketch as PNG. All data stays local.
UD5 Toolkit
A beautiful full‑screen drawing canvas with variable brush sizes, colors, and an eraser. Export your sketch as PNG. All data stays local.
Draw a digit (0‑9) on the canvas and a simple neural net guess the number. Educational demo. No upload.
Move your mouse or finger to create colorful paint splatters on canvas. Great stress reliever. Download as PNG.
Enter the amount of leftover paint and see how many square feet it still covers. Plan touch-ups.
Limit browser gestures on an element: pan‑x, pinch‑zoom, manipulation. Draw on a canvas to test. Mobile dev helper.
Draw shapes and experiment with globalCompositeOperation. See Porter‑Duff operators in action. Great for game devs.
Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.
Write a paint worklet in JavaScript and see it used as a CSS background instantly. Experiment with Houdini. Local.
Paste HTML/CSS and render it to a canvas image. Download as PNG. For creating dynamic social share images.
Register and apply a custom paint worklet to draw a background pattern dynamically. Write the paint function in the browser.
Upload a small image and see it tiled as a canvas pattern. Export the pattern or copy the JavaScript.
Render the classic Stanford Bunny with a basic WebGPU pipeline. Rotate and zoom. Check if your browser supports WebGPU.
Enter nozzle type and surface area to get optimal spray distance, sweep speed, and estimated cans needed. Prevent runs and drips.
Select starting and ending surface condition to get an optimal sandpaper grit sequence. Never skip a grit again and achieve a flawless wood finish.
Select paint type and brand to get the recommended thinning ratio for airbrush. Achieve smooth, clog-free spraying.
Visually create the glassmorphism effect: background blur, transparency, and border. Copy the complete CSS. Modern UI design.
Help the bird fly through pipes without touching them. Click or tap to flap. Track your high score in localStorage. Classic time‑waster.
Calculate how much thinner to add to achieve the right viscosity for spray guns. Common ratios.
See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.
Input room dimensions and number of coats to estimate how many gallons/litres of paint you need. Excludes doors/windows optionally. Local calculator.
Create an animation that advances with scroll using animation‑timeline: scroll(). See the visual timeline editor. Modern CSS.
Enter a number and see an animated factor tree breaking it down to primes. Perfect for teaching factorization.
Explore the Mandelbrot set with click-to-zoom and vibrant colors. A mesmerizing math journey inside your browser.
Toggle content‑visibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
Write Mermaid syntax inside Markdown blocks and instantly see rendered flowcharts, sequence diagrams, and Gantt charts. Copy SVG.
Create a custom element with named slots and see content projection in action. Learn Web Components basics.
Take a screenshot of the current browser tab using Screen Capture API. Crop, annotate with text and arrows, and download as PNG. Local only.
Select any HTML element on a page and capture its screenshot. Download as PNG. Perfect for bug reports. JavaScript API demo.
Drop files onto a zone and see a preview with name, size, and type. Copy the JavaScript pattern for your site.
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.