Is there a Javascript library for Paint-like applications using canvas?

Question

Is there a Javascript library which has built-in features for quickly creating a Paint-like web application using the canvas element?

EDIT: So, far, I have found Javascript libraries that allow easy animation of canvas elements -- such as Raphael JS -- and Javascript tutorials for creating simple Paint apps, but no robust libraries for Paint-like applications.

EDIT 2: I found a Javascript tutorial on a pretty nice looking Paint app using the canvas element. I'd still like to see what others have found.

Using this [Fabric.js demo](http://kangax.github.com/fabric.js/demos/kitchensink/), click on "enter drawing mode" button in sidebar to draw on canvas. Is this what you're looking for? — kangax, Aug 23 '11 at 06:12
@kangax I have seen [demo](http://fabricjs.com/freedrawing/), penceil drawing is ok but circle and others are not similar to paint how can we do that? — Thirumalai murugan, Nov 15 '13 at 07:07
@Thirumalaimurugan creating your own brushes is easy — http://fabricjs.com/fabric-intro-part-4/#free_drawing — kangax, Nov 15 '13 at 11:42
@kangax Thanks but there is no full example code, please try to provide the full code which will help much for the beginners, and more over its giving for pencil only, I am expecting the drawing like Microsoft paint brush. Simply if I want to say I need to create a program like Microsoft paint using wonderful fabric.js — Thirumalai murugan, Nov 15 '13 at 12:33
@kangax Just stumbled across this step by step tutorial on how to create one: http://codetheory.in/creating-a-paint-application-with-html5-canvas/ - what's more, it is easier than I though and the code is free — rshimoda, May 21 '15 at 12:54

rsp · Answer 1 · 2015-06-09T18:35:10.557

Raphaël

Raphaël doesn't use Canvas. It uses SVG on browsers that support it or VML on Internet Explorer.

SVG

If you want an SVG solution designed specifically for drawing then take a look at:

SVG-edit

See this demo.

Canvas

If you want to use Canvas but you need a retained mode rendering then see:

Update (February 2014)

ART, a retained mode vector drawing API - targets all three of HTML5 Canvas, SVG and VML (plus some code generation). Used by the Facebook team together with the React UI toolkit (see: react-art and the "art" branch of the react-page project on GitHub).

score 7 · Answer 2 · answered Aug 16 '15 at 02:20

7

Literally Canvas fits this exact purpose: http://literallycanvas.com

"Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget...You can use it to embed drawing boards in web pages."

answered Aug 16 '15 at 02:20

Steve Landey

2,609
25
25

1

Looks like this product was initally started a year after I asked this question. Good to see more current solutions! – Ivan Aug 17 '15 at 05:46
1

Project is no longer maintained. – user8555937 Mar 18 '21 at 07:19
That's correct, I stopped maintaining it due to lack of community support. – Steve Landey Apr 11 '21 at 18:48

deathangel908 · Answer 3 · 2023-05-26T09:00:33.487

There is an npm package spainter. Click on Run code snippet bellow and go fullscreen

var p = new Painter(containerPainter);

<script src="https://cdn.jsdelivr.net/npm/spainter@1.0.0/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spainter@1.0.1/index.css"/>
<div id="containerPainter"></div>

or via webpack (or any other loader):

npm i spainter lines-logger

in your js:

import Painter from 'spainter';
import 'spainter/index.sass'; // you can impor index.css if you don't have sass, ensure that you copy the fonts from the directory as well to production. Set `$FontelloPath: "../node_modules/spainter/font"`
import {LoggerFactory} from 'lines-logger';
const containerPainter = document.createElement('div');
document.body.appendChild(containerPainter);
const p = new Painter(containerPainter, {logger: new LoggerFactory().getLoggerColor('spainter', 'blue')});

Live Demo

score 3 · Accepted Answer · answered Aug 20 '11 at 20:01

3

There is processingJS, but as it is port of the JAVA bassed processing you write your code in "javaish" processing language. But after all you could create what an paint like app. Another framework is fabricJS which is also really great to work with canvas.

answered Aug 20 '11 at 20:01

Andreas Köberle

106,652
57
273
297

Ivan Borshchov · Answer 5 · 2021-05-15T21:28:25.233

You can try Painterro. It can be used for pasting and processing screenshots, cropping, drawing primitives and text, rotating, resizing (changing resolution), scaling, drawing arrows, exporting with desired compression level, supports hotkeys

Live Demo

Painterro has a browser-script version and npm package

Could be easily integrated with any SPA like Vue/React, works well in electron/cordova,

Disclosure: I am a founder of Painterro

score 0 · Answer 6 · answered Aug 20 '11 at 20:02

0

I think the closest you'll get is to expand on what that tutorial has gone through.

It's hard to create "general purpose" paint-like functionality due to the wide range of requirements.

answered Aug 20 '11 at 20:02

Bojangles

99,427
50
170
208

Is there a Javascript library for Paint-like applications using canvas?

6 Answers6

Raphaël

SVG

Canvas

Update (February 2014)

Linked