#canvas articles | Hashnode

SRSudarshan Raisudarshanrai.hashnode.devJun 27 · 4 min read

03 - Managing Game Entities with Objects and Classes

If you completed the challenges in the previous chapter, you likely noticed a issue: to make multiple squares, you had to duplicate your variables and code. Complete games don't just have one or two o

0

PPixelShiftpixelshift.hashnode.devJun 10 · 3 min read

How I Built a Particle Galaxy with Pure HTML Canvas

10,000 particles. No physics engine. Just Math.random() and requestAnimationFrame. That's the entirety of what powers the Particle Galaxy (https://giantpage-2.polsia.app/galaxy.html) exhibit — a swirl

0

PPPrajapati Pareshsmarttechdevs.hashnode.devJun 5 · 3 min read

Multi-Layer Canvas Tuning in React

The Limits of SVG and DOM Visuals When building interactive multi-tenant dashboards, high-frequency chart graphs, or custom workflow mappings at Smart Tech Devs, rendering speed determines user retent

0

SPShaishav Patelultimatetools.hashnode.devMay 10 · 7 min read

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

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...

0

SPShaishav Patelultimatetools.hashnode.devMay 9 · 5 min read

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

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...

0

SPShaishav Patelultimatetools.hashnode.devMay 9 · 5 min read

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

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...

0

SPShaishav Patelultimatetools.hashnode.devMay 9 · 6 min read

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

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...

0

SPShaishav Patelultimatetools.hashnode.devMay 9 · 6 min read

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

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...

0

SPShaishav Patelultimatetools.hashnode.devMay 9 · 6 min read

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

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...

0

SPShaishav Patelultimatetools.hashnode.devApr 30 · 7 min read

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

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

0

#canvas

#canvas

Explore Hashnode

Trending tags this week

03 - Managing Game Entities with Objects and Classes

How I Built a Particle Galaxy with Pure HTML Canvas

Multi-Layer Canvas Tuning in React

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

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

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

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

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

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

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

#canvas

Search Hashnode

#canvas

Explore Hashnode

Trending tags this week

03 - Managing Game Entities with Objects and Classes

How I Built a Particle Galaxy with Pure HTML Canvas

Multi-Layer Canvas Tuning in React

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

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

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

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

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

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

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