Tag

#canvas

225 posts30 followers

Explore Hashnode

Alternatives

BUKE STUDIO6d ago · 7 min read

One image, 66 shoe panels: the geometry (and four silent bugs) behind a canvas cutting pipeline

I make custom printed sneakers. People upload a picture, we print it onto the leather panels of a shoe, and somewhere between those two steps the picture stops being a picture and becomes a set of man

bukestudio.hashnode.dev

ZippicOct 18 · 7 min read

Cropping Images in the Browser: Aspect-Ratio Math, Canvas, and Batch Presets Without Uploads

Cropping looks like the simplest image operation there is: pick a rectangle, keep the pixels inside it. In practice, most "why does my image look wrong?" bugs I see in front-end projects come from cro

zippic.hashnode.dev

TattooTryOnOct 19 · 5 min read

How to build a drag, pinch and rotate overlay editor on top of a photo

The thing I needed sounds small. Show a photo, put a transparent PNG on top, and let people move, resize and rotate it with a mouse or two fingers. It's the core of a tattoo preview tool I just launch

tattootryon.hashnode.dev

hacikanprofessor035-progOct 17 · 6 min read

Building a candlestick chart engine on raw Canvas2D (no chart library)

Originally published on Dev.to. Every charting tutorial reaches for a library. I ended up hand-writing the engine instead, and it turned out to be less code than I expected — plus three performance l

1 taplatform-notes.hashnode.dev

choe seunggyuOct 17 · 9 min read

Your 16px favicon is blurry because of geometry, not the resampler

After my post on PNG entries in .ico files, a commenter asked a fair question: when you generate the small sizes, do you pixel-align them? Their point was that a 16px icon looks soft even when nothing

editpot.hashnode.dev

Abid AliOct 16 · 7 min read

Building a Meme Caption Generator in the Browser with Canvas: Text Wrapping, Draggable Boxes and PNG/JPG Export (No Uploads)

A meme caption tool looks like a weekend project. Put an image on a canvas, write some white text with a black outline, download. Then real people use it. Someone types a caption that's too long for t

abidali671.hashnode.dev

Alex OliinykOct 15 · 64 min read

How to Build Disaster Simulations on a Real Map: Animated Canvas Layers and Collapsing 3D Buildings with Mapbox GL JS and Three.js

At some point, a map project needs more than markers and polygons. You want something to happen on the map: water moving up a street, smoke drifting with the wind, or a shockwave spreading out from a

freecodecamp.org

ConvertubeOct 13 · 4 min read

Why your iPhone photos look washed out after converting HEIC in the browser

If you decode an iPhone HEIC photo in JavaScript, draw it to a canvas and export a JPG, the result often looks slightly dull next to the original — skin tones flatter, skies less blue. Nothing is "wro

convertube.hashnode.dev

xiangcOct 9 · 11 min read

Building a 60fps Canvas Frustum Camera for 4K System Architecture Presentations

When presenting a complex enterprise topology—whether it's a multi-region Kafka cluster, a distributed consensus state machine, or an intricate domain-driven microservices map—traditional slide decks

focusflow.hashnode.dev

Sohail KhanSep 30 · 16 min read

Fabric.js Editor Problems: Save, Load, Undo, Autosave, and Recovery

Fabric.js makes it easy to put shapes, text, and images on a canvas. Building an editor around that canvas takes more work. You need to know which object is which after a reload, how to undo a drag, w

chroma-panel.hashnode.dev

Search Hashnode