Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Clip Paint - Paint in the Browser


Clip Paint is a JavaScript web app reproducing MS Paint functionality and UX in the Browser. I use it to create screenshots for blog posts and bug reporting. It is work in progress. Currently, selection capabilities work. To be added are drawing figures and text.

Running locally

Fork and clone the repo. Then simply open the index.html file in your browser. The entire app is client-side. Nothing runs on a server.

Cool technologies used

Clip Paint is entirely in the browser and in JavaScript. No dependencies on a CLI or back-end.

Clipboard APIs

Copy and pasting via keyboard shortcuts Ctrl+c and Ctrl+v are supported in the browser. Clip Paint tries to leverage that as much as possible. There is one limitation however - it is not possible to copy an image to the clipboard. Therefore, you must press the download button to obtain the final PNG.

Fortunately however, copy/paste codes work in the web app. You see I copy the image base64 representation onto the clipboard as text/plain. In paste events I can grab that.

Canvas and SVG

The web app uses Canvas and SVG. They serve different purposes. The canvas, just as the name implies, is the drawing canvas. SVG is used to handle human interactions. For instance drawing a select box, clipping an image, dragging an image, dropping an image, resizing an image. Thanks to Ulrich-Matthias for building the excellent svg.js library. It greatly simplified implementing these operations.

Base64 encoded images

In HTML, images can be encoded in a base64 string and represented as a Data URL.

// The Data URL format

// A PNG image as a Data URL

Clip Paint uses Data URLs extensively on img and SVG image elements by attaching them to the src attribute.

Client-side download

Its easy to attach a base64 data url to an anchor tag. However there is a top limit different per browser. Fortunately dandavis wrote download.js to solve this problem. Even a large file can be downloaded client-side very easily.

Client-size image resize

Image resize on HTML canvas really sucks. Thanks to Vilius for writing a helpful image resize function called hermite.js. Pixel-perfect image resize was essential. MS Paint doesn't even have that.


The entire app is contained within one file app.js. It is self documented.


Clip Paint does depend on a number of other libraries. These are:


Clip Paint - Paint in the Browser



No releases published


No packages published
You can’t perform that action at this time.