Tag feed

Browser-Based Image Cropping with the Canvas API: Aspect Ratio Locking, Drag Handles, and Client-Side PNG Export

May 10 · 7 min read · Image cropping is a deceptively complex UI task. A minimal implementation is a few lines of canvas code. A production-quality tool — with drag handles, aspect ratio locking, real-time preview, and client-side export — requires careful coordinate math...

Building a Watermark Image Tool — Text and Image Watermarks, Opacity Control, and Tiled Layout With Canvas API

May 9 · 5 min read · The Watermark Image tool at Ultimate Tools adds text or image watermarks to uploaded photos in the browser. The implementation uses Canvas globalAlpha for opacity, anchor-based positioning math, and a tile loop for repeated watermarks — all client-si...

Building a Blur Image Tool in the Browser — CSS Backdrop Filter, Canvas Convolution, and Adjustable Intensity

May 9 · 5 min read · The Blur Image tool at Ultimate Tools applies adjustable blur to uploaded images in the browser. The two-layer approach: CSS filter: blur() for fast live preview while the user moves the slider, and Canvas pixel convolution for the final export. Why...

Building a Client-Side Image Resizer — Canvas drawImage, Aspect Ratio Lock, DPI Metadata, and Blob Export

May 9 · 6 min read · The Image Resizer at Ultimate Tools resizes images to exact pixel dimensions in the browser — no server, no upload. The implementation uses the Canvas API with a few non-obvious details: bicubic-quality downsampling via multi-step resize, aspect rati...

Building a QR Code Scanner in the Browser — BarcodeDetector API, Camera Stream, and Image Upload Fallback

May 9 · 6 min read · The QR Scanner at Ultimate Tools decodes QR codes two ways: live from a camera stream, and from an uploaded image. Both run entirely in the browser — no server, no third-party scanner service. Here's how each mode works, including the BarcodeDetector...

Building a Rotate and Crop Image Tool — Canvas Transform, EXIF Stripping, Aspect Ratio Presets, and Lossless PNG Export

May 9 · 6 min read · The Rotate Image and Crop Image tools at Ultimate Tools both run entirely in the browser using the Canvas API. Here's the non-obvious implementation detail in each: EXIF orientation corruption on rotate, and coordinate-space mismatch on crop. Part 1...

Building a Canvas Image Watermark Tool in React — Text Overlay, globalAlpha, 9-Position Grid, and Auto-Shadow

Apr 30 · 7 min read · Adding a text watermark to an image is a single fillText call. Making it work correctly — opacity, position grid, adaptive shadow, live preview without thrashing — requires understanding how Canvas st

BABrett A McCalldarketype.hashnode.dev

The melt: what 230,000 particles taught me about letting go

Apr 16 · 7 min read · The feeling You know that moment where you're staring at your screen and everything feels permanent? The taskbar, the icons, the wallpaper — all these little digital objects pretending to be solid. I wanted to break that illusion. I wanted your scree...

BABrett A McCalldarketype.hashnode.dev

The melt

Apr 16 · 2 min read · The melt April first. The one day a year where chaos is not just permitted but expected. Wanted to build something that would make friends question reality for a few seconds before the relief hits. The idea was simple enough: take an image, turn it i...

Building a Browser-Based PDF eSign Tool — Canvas Signature Drawing, Drag-to-Place Overlay, and pdf-lib Embedding

Apr 10 · 6 min read · Building a PDF signing tool means solving four distinct problems: Signature creation — letting the user draw, type, or upload a signature Page preview — rendering the PDF so the user can see where t