Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
Ahmed Nabulsi committed Jul 31, 2018
2 parents 65e9473 + 7915e3c commit e0d6c26
Showing 1 changed file with 56 additions and 0 deletions.
56 changes: 56 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1 +1,57 @@
# LumenCanvas
LumenCanvas is an open source HTML5 drawing tool based on Fabric.js & JQuery. You can use it to embed drawing boards in web pages. You can save the drawings as a string or JSON and you can retrive it again. LumenCanvas is an object based drawing tool. You can move the drawn objects around and change the border of the filling color.

### Preview
![LumenCanvas Preview](http://wizvalley.com/paint/lumincanvas_preview.png)


### Online Demo Link
[Click Here...](http://wizvalley.com/paint/)


### Example
```js
new LumenCanvas({selector : ".drawing-canvas"})
```

### How to call a method
```js
var LumenCanvasInstance = $(".drawing-canvas").data("LumenCanvas");
var jsonData = LumenCanvasInstance.GetJSON();
```

### Options
Here's a list of available settings.
```js
new LumenCanvas({
selector : "",
textStetting: {familty:'Arial',size:16},
spellcheck: false, /// set this true if you want to enable spellcheck in text tool
width : window.innerWidth-100, // default will be window width
height : 548,
})
```

### GetJSON
Returns a json object that represents the drawing area.

### GetDataString
Returns stringified json object that represents the drawing area.

### SetJSON(json) @param {json} fabric js JSON object.
Set the drawing area to the passed object.

### GetDataURL(options) @param {options} see below defaultOptions object.
Open the drawing in a new tab or return the URL string.
```js
var defaultOptions = {
format: 'png',
left: 0,
top: 0,
width: 500,
height: 350,
openInNewTab : false
}
```


0 comments on commit e0d6c26

Please sign in to comment.