A professional, zero-install, lightweight and infinite-canvas web sketching tool!
Profesyonel, kurulum gerektirmeyen, hafif ve parça mimarisiyle çalışan sonsuz tuval!
Web Draw is a feature-rich, client-side drawing and annotation application built purely with HTML5 Canvas, Vanilla JavaScript, and CSS3. It features an infinite canvas, a premium Mac-style UI, multiple drawing tools, dynamic grid backgrounds, and much more.
- Infinite Canvas: Uses a heavily optimized chunked-raster memory architecture. Draw limitlessly without performance lags.
- Hardware Pan & Zoom: Use
Middle MouseorSpacebarto pan, and theMouse Wheelto smoothly zoom. - Tools: Pen (various dynamic brushes), Transparent Pen, Eraser, Blur Smudge Tool, Text, and Geometric Shapes.
- Mac-style UI: Beautiful glassmorphism panels, dark/light theme, and dynamic cursors.
- No Dependencies: Built completely with Vanilla JS ES2022. No React, no bundlers!
- HTML5 Canvas (2D Context & Virtual Camera)
- Vanilla JavaScript (ES2022 Modules)
- CSS3 (Custom Properties, Flexbox, UI glassmorphism)
- Clone the repository:
git clone https://github.com/KaganAk71/WebDraw.git - Run any static server (e.g., Python):
python3 -m http.server 8000 - Navigate to
http://localhost:8000on your browser!
- Space + Drag or Middle click: Pan around the infinite canvas.
- Mouse Wheel: Zoom in and out.
- Right Click: Erase instantly or pan (configurable in settings).
- Shortcuts:
H(Hand),P(Pen),E(Eraser),B(Blur),T(Text),R(Shape),S(Settings).
- Infinite Canvas & Chunked memory rendering
- Dynamic Grid Backgrounds
- Blur, Shape, and Text tools
- Browser Extension packaging (Manifest V3)
- Collaboration / Multi-player support
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Web Draw, yalnızca HTML5 Canvas, Vanilla JavaScript ve CSS3 ile saf (pure) olarak geliştirilmiş, performanslı bir web çizim motorudur. Sonsuz bir tuval altyapısına, şık Mac tarzı bir arayüze ve eksiksiz çizim araçlarına sahiptir.
- Sonsuz Tuval (Infinite Canvas): Belleği yormayan
Chunked-Raster(Parçalı Raster) mimarisi. Donmadan sınırsızca çizin. - Donanımsal Kaydırma & Yakınlaştırma: Kaydırmak (pan) için
Boşluk (+ Sol Tık)ya daOrta Tuşkullanın. Pürüzsüz yakınlaştırma içinFare Tekerleğini kullanın. - Araçlar: Kalem (Tükenmez, kurşun, fosforlu, suluboya vb.), Silgi, Bulanıklaştırma (Blur), Metin ve Geometrik Şekiller.
- Gelişmiş Arayüz: Karanlık/aydınlık (Dark/Light) tema, cam efektleri (glassmorphism) ve dinamik imleç.
- Sıfır Bağımlılık (No Dependencies): React veya paketleyici (Webpack vs.) gerektirmez. Saf Vanilla JS.
- HTML5 Canvas (2D Render Motoru ve Sanal Kamera)
- Vanilla JavaScript (ES2022 Modüler Yapı)
- CSS3 (Renk Değişkenleri, Flexbox, UI Cam Efekti)
- Repoyu klonlayın:
git clone https://github.com/KaganAk71/WebDraw.git - Herhangi bir statik sunucu ile başlatın:
python3 -m http.server 8000 - Tarayıcınızda
http://localhost:8000adresine gidin. Bütün sistem bu kadar!
- Pan (El Aracı):
Boşluk tuşuna basılı tutunveya farenizin orta topuna basılı tutun. - Diğerleri:
H(El),P(Kalem),E(Silgi),B(Bulanıklaştırma),T(Yazı),R(Şekiller),S(Ayarlar).
- Parçalı Sonsuz Tuval (Chunked rendering) Mimarisinin Kurulması
- Dinamik Kılavuz (Grid) Çizgileri
- Yeni Araçlar (Şekil, Metin, Blur)
- Google Chrome & Edge Eklentisi (Extension) Paketlemesi
- Gerçek Zamanlı Çoklu Oyuncu (Multiplayer) Desteği
Açık kaynak dünyasını yaşatan şey sizlerin katkılarıdır! İstediğiniz özelliği eklemekte özgürsünüz.
- Projeyi Forklayın
- Yeni bir dal (branch) açın (
git checkout -b ozellik/YeniOzellik) - Yaptığınız değişiklikleri commit edin (
git commit -m 'Yeni bir özellik eklendi') - Dalınızı (branch) Pushlayın (
git push origin ozellik/YeniOzellik) - Bir "Pull Request" (PR) oluşturun.
KağanAk 🔗 https://github.com/KaganAk71
Biz Türk Yazılımcılarıyız 🇹🇷💻
We are Turkish Coders 🇹🇷💻
Deneyap Atölyelerinde kurulduk ve şimdi burada projelerimizi geliştiriyoruz.
Sizlerin desteğiyle daha da iyisini yapacağız.
We were founded in the Deneyap Workshops, and we are now developing our projects here.
With your support, we will become even better.
🔥 Made with passion by Turkish Coders
Your Code. Your Freedom.
Eğer bu projeyi beğendiyseniz sağ üstten yıldız (Star ⭐️) vererek destek olabilirsiniz! Desteğiniz bizim için çok önemli.
If you like this project, please consider giving it a Star ⭐️ on GitHub to show your support!