TL;DR There are lots of per-pixel bitmap image editors out there but this one is mine.
No installation. No signup/registration. Instant access. Ad-free.
Features (What You Can Do)
- Draw pixel art with Pencil, Line, Rectangle, Circle, and Flood Fill tools
- Monochrome conversion
- Color inversion
- Live preview window
- Choose from 5 canvas sizes: 8×8 to 128×128 pixels
- Zoom from 5x to 20x for comfortable editing
- Grid overlay for alignment
- Cut, copy, and paste selections
- Flip horizontal/vertical
- Cmd/Ctrl+C/X/V/A, plus H/V for flips
You can now follow the tutorials and edit the code right in your web browser with the Online Retro IDE
– No downloads, configuration, etc necessary, and it is free!
Import/Export your work
- Download as PNG
- Export Commodore 64 BASIC DATA statements
- Import images and convert to mono pixel art
The Story Behind the Web App
Recently I have been working on something that I haven’t done for ages. I’ve been writing for a magazine, one that is printed on paper and sent to subscriber’s homes!
This meant I wanted to go the extra and add some graphical polish to the game I was creating along with the tutorial I was writing. Yeah I could have used an existing game assets bundle, repurposed some old images, or just used placeholders, but I felt like people would have higher expectations and also I wanted to reward the reader’s support.
I did try a bunch of options, some I had used happily in the past, but I kept finding frustrations in the workflow, compatibility with my development environment (I use Mac/Linux predominantly), or extra effort to get things how I needed.
As a programmer there are a few options at that point.
- Keep looking/Suck it up.
- Write a converter/post-processor
- Build your own tool
As it happens, I had built a few parts of what I wanted in the past, but nothing cohesive or comprehensive, so phase 1 was seeing what I had and what I needed to create.
Plumbing the Pieces
Years ago, my friend Wendy ran a website about kids activities, and I created a tool for her with my friend Nick. It was kind of a paint by numbers but with extra steps. Her team used it to create worksheets and the kids would follow the generated instructions to discover the picture that was formed if they followed the steps correctly.
To get the minimal pieces that I really needed (called the “Minimum Viable Product” in the trade) was therefore fortunately quite quick. But obviously I got carried away yet again.
The code was simple, and conveniently I only needed the drawing part. It used the HTML 5 canvas, which has become a really amazing tool for working with images in a modern web browser.
JavaScript and Canvas
The Canvas, as the name suggests, is an object that allows you to draw pixels, lines, shapes, etc.
You can embed a Canvas into your web page using the HTML element.
There are a couple of parameters, as you would expect:
- ID – The identifier, allows you to specify the Canvas as the target of your commands
- Width/Height – Set the dimensions in pixels
- Style – Change the appearance and visibility
Once you have your Canvas, you can draw to it by finding it by ID, then creating a “context” from the found object:
Canvas