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.
Retro Pixel Art Editor
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
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
…
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.
Retro Pixel Art Editor
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
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 <canvas> 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
<canvas id="myDrawing" width="300" height="300" style="border:1px solid black;">
</canvas>
Once you have your Canvas, you can draw to it by finding it by ID, then creating a “context” from the found object:
<html>
<head><title>Canvas</title>
<script>
function init()
{
var c = document.getElementById("myDrawing");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.font = "24px Verdana";
ctx.fillText("Hello World", 80, 100);
}
</script>
</head>
</html>
<body onload="init()">
<canvas id="myDrawing" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
This produces the traditional “Hello World” :)
Notice we make our JavaScript run onload – this is an event, and is important because otherwise the JS might not run after the HTML is rendered, and the getElementById wouldn’t find it.
Some of my code is not optimised enough, for example flipping/pasting can be slow, but it works for my needs even in this “version 1”.
What Makes it Retro?
The whole point of this exercise was to produce monochrome bitmap data for use in Commodore 64 BASIC.
When it is generated it looks like this:
1000 DATA 8,28,62,127,127,28,62,0
1010 DATA 24,60,102,126,102,102,102,0
1020 DATA 124,102,102,124,102,102,124,0
1030 DATA 60,102,96,96,96,102,60,0
1040 DATA 120,108,102,102,102,108,120,0
1050 DATA 126,96,96,120,96,96,126,0
1060 DATA 126,96,96,120,96,96,96,0
1070 DATA 60,102,96,110,102,102,60,0
1080 DATA 102,102,102,126,102,102,102,0
1090 DATA 60,24,24,24,24,24,60,0
1100 DATA 30,12,12,12,12,108,56,0
1110 DATA 102,108,120,112,120,108,102,0
1120 DATA 96,96,96,96,96,96,126,0
1130 DATA 99,119,127,107,99,99,99,0
Which is a lot easier to paste into my work in progress game code than having to use several tools in succession. It came in really handy when the editor asked if I could add his publication branding to the finished game!
Go ahead and try it!
While I made it for myself, I would be delighted if you kicked the tires and gave it a try. If there is enough interest I could develop it some more or open up the repo for people to contribute :)