Clip Paint - Paint in the Browser
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CNAME
README.md
app.css
app.js
download.min.js
favicon.ico
favicon.png
help.html
hermite.js
index.html
svg.draggable.js
svg.js
svg.min.js
svg.resize.js
svg.select.css
svg.select.js

README.md

Clip Paint - Paint in the Browser

https://clippaint.com/

Motivation

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
data:[<mediatype>][;base64],<data>

// A PNG image as a Data URL
data:image/png;base64,/9j/4AAQSkZJR....

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.

Code

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

Dependencies

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