Doodle !
By
@Yousuff
- 6 Devlogs
- 6 Total hours
Doodle be creative !! - Your Canvas , Your Pixel Art , Your Styles , Your Doodles!
Rebuilt Pixel Art as it was built using alot AI because it was hard to implement, but still I now rebuilt it.
This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.
Feedback
Hey! Thanks for shipping your project. It's not quite ready for voting yet, so here's what we'd like you to change:
it seems like you have used more AI than Declared i would suggest your to declare honestly and try to rewrite some of the code from scratch , it seem like you have used extensive amount of AI , please note that only 30% max usage of AI is allowed !
Once you've made these, ship it again and we'll take another look!
Shipwright walkthrough
Ship #1
Pending review
Doodle!
Doodle(doodle.) is a lightweight drawing website built with HTML, CSS, vanilla JavaScript, and the Canvas API. It provides a browser-based drawing experience, extended with a dedicated Pixel Art editor that preserves the original drawing experience while introducing specialized pixel-art tools.
Features
- Drawing Editor: Create drawings directly in the browser.
- Pixel Art Editor: Dedicated pixel canvas with adjustable resolutions.
- Drawing Tools: Pencil, eraser, fill, and eyedropper.
- Color Palette: Choose and apply colors while creating artwork.
- Grid Controls: Toggle the pixel grid for precise editing.
- Transparency: Create artwork with transparent backgrounds.
- PNG Export:*Export pixel art as an image.
- Undo/Redo: Reverse and restore editing actions.
- Continuous Drawing: Interpolate strokes to prevent skipped pixels during fast movements.
Development Process
Doodle started as a lightweight browser-based drawing project. I expanded it with Pixel Art as a separate feature, then tested and refined its drawing behavior, fill rendering, transparent-pixel handling, and editing history. The latest improvements include smoother strokes and Undo/Redo support.
Started Pixel Art as a new feature for Doodle, built with HTML, CSS, and vanilla JavaScript. Added a pixel canvas, adjustable resolutions, color palette, pencil, eraser, fill, and eyedropper tools, grid toggle, transparent backgrounds, and PNG export. Improved fast-stroke drawing with pixel interpolation, fixed immediate Fill rendering, handled transparent pixels in the eyedropper, prevented unnecessary undo history entries, and added Redo alongside Undo.
Spent alot of time fixing the Text button in Doodle. Turns out, it was just a small CSS selector mistake — text instead of #text 😭Everything else was already working, so I kept the fix simple instead of messing with code that didn’t need changing. One tiny bug out of the way. Back to building! - Next is You can rotate !
Doodle !! - Text Box the color you wan t the size you want it to be ! - TEXT in Doodel!!
Doodle — ShortcutsExpanded Doodle with six drawing tools: Brush, Eraser, Line, Rectangle, Circle, and Arrow. Implemented Undo and Redo with drawing history, Clear Canvas, and Export PNG functionality. Added customizable drawing colors and brush sizes, along with keyboard shortcuts for faster workflow: Ctrl + Z to undo, Ctrl + Y to redo, Ctrl + Shift + Z to redo, Ctrl + L to clear the canvas, and Ctrl + P to export artwork as a PNG. The interface features a clean, minimal design inspired by the original reference, with responsive canvas resizing. All implemented features have been tested and are working.
doodle. - till now only free hand canvas with adjustable brush size, selectable Colors , Undo and Clear buttons.
