On this page
উৎপত্তি এবং উদ্দেশ্য
"DrawSync মূলত Coordly নামের একটি বড় প্ল্যাটফর্মের জন্য এমবেডেড অঙ্কন এবং কোলাবোরেশন বৈশিষ্ট্য হিসাবে কল্পনা করা হয়েছিল।"
"Excalidraw এবং Eraser এর মতো টুল দ্বারা অনুপ্রাণিত হয়ে, লক্ষ্য ছিল একটি হালকা হোয়াইটবোর্ডিং অভিজ্ঞতা তৈরি করা। যাইহোক, ক্যানভাস এবং রিয়েল-টাইম কোলাবোরেশন মেকানিক্স পরিপক্ক হওয়ার সাথে সাথে এটি স্পষ্ট হয়ে ওঠে যে ইঞ্জিনটি নিজেই দাঁড়ানোর জন্য যথেষ্ট শক্তিশালী ছিল।"
"একটি পারফরম্যান্ট অসীম ক্যানভাস তৈরি করার জন্য স্থানাঙ্ক ম্যাপিং, পয়েন্টার-কেন্দ্রিক জুমিং এবং মসৃণ স্ট্রোক ইন্টারপোলেশনের চারপাশে জটিল গণিতের সমাধান প্রয়োজন—সব কিছুই একাধিক সমসাময়িক ব্যবহারকারীর মধ্যে সামঞ্জস্যপূর্ণ অবস্থা বজায় রেখে।"
ক্যানভাস এবং কোঅর্ডিনেট ইঞ্জিন
The drawing engine is built on the HTML5 Canvas 2D API, utilizing a retained-mode rendering loop. Instead of drawing directly to the screen and forgetting the shapes, every stroke and text object is stored in memory as JSON and re-rendered entirely on every frame update (`requestAnimationFrame`).
This retained-mode approach simplifies infinite panning, zooming, and undo/redo mechanics, as the entire state can be re-projected at any time.
To support an infinite coordinate model, the engine tracks `offsetX`, `offsetY`, and `zoom` factors. Every screen coordinate (where the mouse clicks) must be mathematically transformed into a virtual canvas coordinate before being stored.
- Device pixel ratio scaling for crisp high-DPI (Retina) rendering.
- Custom pointer, mouse, and touch event handling.
- Object-based vector history.
মসৃণ ভেক্টর ইঙ্ক
A common pitfall in canvas drawing is using standard `lineTo()` connections between rapid mouse events, which results in jagged, unnatural lines.
DrawSync solves this by calculating the midpoints between successive pointer coordinates and drawing bezier curves (`quadraticCurveTo`) through them. This mathematical interpolation turns discrete pointer events into fluid, natural-looking ink strokes.
রিয়েল-টাইম কোলাবোরেশন
To handle the complex requirements of real-time state synchronization, DrawSync utilizes Liveblocks.
Initially, I experimented with a custom Socket.IO implementation. However, managing WebSocket connections, reconnections, and presence scaling for a side project added unnecessary backend overhead.
Migrating to Liveblocks provided managed WebSockets and out-of-the-box presence. Ephemeral data, like remote cursors, syncs via Liveblocks presence (`updateMyPresence`), while persistent drawing events (strokes, clears, undo/redo) are broadcasted to the room via pub/sub payloads.
ইঞ্জিনিয়ারিং চ্যালেঞ্জ
1. অসীম জুম গণিত
Problem: Implementing zoom that tracks the user's cursor (pointer-centered zooming) rather than zooming strictly into the top-left corner of the canvas.
Approach: Adjusting the `offsetX` and `offsetY` relative to the current mouse coordinates before applying the new `zoom` scale in the `handleWheel` event.
Result: A natural, predictable navigation experience familiar to users of modern design tools.
2. ইরেজার সংঘর্ষ সনাক্তকরণ
Problem: Because the canvas is rendered as pixels but stored as vectors, erasing requires mathematical hit-detection.
Approach: Calculating whether a mouse click intersects with the bounding box or path of an existing stroke.
Result: Allows users to erase entire vector strokes by clicking them, rather than pixel-by-pixel bitmap erasing.
ট্রেড-অফ এবং সীমাবদ্ধতা
- রেন্ডারিং ইঞ্জিন একটি O(N) রিড্র স্ট্র্যাটেজি ব্যবহার করে। প্রতিটি মাউস মুভমেন্টে পুরো ইতিহাস পুনরায় রেন্ডার করার ফলে অত্যন্ত ঘন অঙ্কনে শেষ পর্যন্ত ফ্রেম রেট কমে যাবে।
- একটি স্ট্রোক মুছে ফেলার ফলে লাইনের কোনো নির্দিষ্ট অংশ স্লাইস বা মুছে ফেলার পরিবর্তে পুরো ভেক্টর পথটি সরিয়ে ফেলা হয়।
- Liveblocks পরিবেশের বাইরে দীর্ঘমেয়াদী পারসিস্টেন্সের জন্য বর্তমানে কোনো বাহ্যিক ডেটাবেস সংযুক্ত নেই।
- কোনো অন্তর্নির্মিত প্রমাণীকরণ সিস্টেম নেই; ব্যবহারকারীরা র্যান্ডম আইডি দিয়ে বেনামে সংযুক্ত হন।
আমি যা শিখেছি
DrawSync তৈরি করা ছিল স্থানিক যুক্তি এবং ক্যানভাস গণিতের গভীর অন্বেষণ। অসীম স্থানাঙ্ক, স্কেলিং এবং হিট-ডিটেকশন পরিচালনা করার জন্য স্ট্যান্ডার্ড DOM ম্যানিপুলেশনের চেয়ে মৌলিকভাবে ভিন্ন মানসিকতার প্রয়োজন।
আমি আরও শিখেছি যে রিয়েল-টাইম কোলাবোরেশন কেবল দ্রুত ডেটা পাঠানোর বিষয়ে নয়, বরং শেয়ার্ড স্টেট সাবধানে পরিচালনা করা, কনফ্লিক্ট মোকাবেলা করা এবং অস্থির নেটওয়ার্ক পরিস্থিতিতে UI ধারাবাহিকতা নিশ্চিত করার বিষয়ে।
আমি অন্যভাবে কী তৈরি করতাম
"যদি আমি আজ DrawSync পুনর্নির্মাণ করতাম, আমি এটিকে প্রথম দিন থেকেই একটি স্বতন্ত্র পণ্য হিসাবে আর্কিটেক্ট করতাম। আমি বৃহত্তর অঙ্কনের জন্য O(N) রেন্ডারিং বটলনেক অপ্টিমাইজ করার, শক্তিশালী প্রমাণীকরণ প্রয়োগ করার এবং ডায়াগ্রাম তৈরি বা হোয়াইটবোর্ড সেশনগুলির সারসংক্ষেপের জন্য AI সহায়তার অন্বেষণে মনোযোগ দিতাম।"
টেকনোলজি স্ট্যাক
| Technology | Role |
|---|---|
| Next.js 15 (App Router) | React ফ্রেমওয়ার্ক এবং রাউটিং |
| React 19 | UI স্টেট এবং কম্পোনেন্ট আর্কিটেকচার |
| HTML5 Canvas 2D | উচ্চ-কর্মক্ষমতাসম্পন্ন রেন্ডারিং ইঞ্জিন |
| Liveblocks | WebSockets, প্রেজেন্স এবং রিয়েল-টাইম ইভেন্ট |
| Tailwind CSS | রেসপন্সিভ স্টাইলিং এবং ডার্ক মোড |
| Vercel | এজ ডেভলপমেন্ট এবং হোস্টিং |