manuhabitela / drawingboard.js Goto Github PK

I can't get events working. Can you give an example please how to use the events?

I am trying the code below:

var drawingBoard = new DrawingBoard.Board('DrawingBoard', {
    webStorage: 'session',
    enlargeYourContainer: true
});
drawingBoard.addControl('Download');

MicroEvent.mixin(drawingBoard);
drawingBoard.bind('board:stopDrawing', function (ev) {
    console.log("drawing");
});

but no chance :(

A 'stamp' control with custom brush shapes (triangle, tree, star etc.) would be really cool.

Any ideas on how to achieve that? One would need to change the cursor from the default dot to something predefined

How to change eraser size ? Can you add this function ?

I need to create new controls like Text,Ellipse and rectangle..anybody can help me..???

I'd like to give my users the option to save the drawing and then keep editing later on. Thanks :)!

Is there a way to display all brush sizes all the time?

example:

Is there any plan on adding zoom in/out feature (using scale() perhaps)?

When multiple boards are created on the same page, with localStorage support activated, the content of the first board is restored on all the others at page load.

The board:startDrawing event doesn't fire after the mode has been changed from pencil to eraser or filler. Even changing the mode back to pencil doesn't restore the event.

Can the event only be bound to one listener or something? I notice it is also used internally.

If you pen is only 1 pixel wide, every few centimers regardless of your pen speed, there is a gap (see picture).

Windows 7, Google Chrome 29

Alors, il te faut une liste de points à faire et une liste de points faits, une variable couleur originale et une couleur souhaitée.

Quand l'utilisateur clique sur un point, tu assignes la couleur originale.
Tu mets ce point dans la liste.
pour chaque point dans la liste
    tu retires le point courant de la liste et tu l'ajoutes à la liste des points faits
    si la couleur originale est égale (ou très proche) à la couleur du point courant
        tu le colories
        tu ajoutes ses 4 (ou 8) voisins à la liste des points à faire s'ils ne sont dans aucune des 2 listes

Après y'a pas mal d'optimisations envisageables mais t'as le gros du truc.

It would be great to see a new webStorage option for Serializing and storing the drawing data to a DB. This way drawingboard could be used collaboratively between multiple users.

Just a feature request to give users an underlying API where custom controls and items can be added to the drawing board toolbar. Great library by the way

It's easy to see: the paint can usually misses a few pixels at the edges of the shapes we want to fill (see the screenshot). Kinda ugly in the end.

An other site with drawingboard.js : http://jdraw.it

Si tu peux ajouter jDraw.it a ton site : http://leimi.github.io/drawingboard.js ce serait sympa :)

Paint bucket does not work on transparent backgrounds:

• If background is set to an image, the image itself can be painted on. Outside the image (if transparent), paint bucket does not work.

• If you use the paintbrush on a transparent area first before switching over to the paintbucket then try to use the paint bucket on the background image this will fail to work.

• if background is set to a color, paint bucket works fine.

edit

• if the eraserColor is set to transparent, but background is set to a color, this also prevent the fill/bucket tool from not working.

Pls and tnks

I'm trying to render react-modal on on top of the drawing board in react. Even though I placed the Modal Component above the drawingboard encapsulated into a React component. The drawing board renders on the top everytime. I tried to increase the z Index. But it doesn't seem to work.

Hi there, is there a feature to load a saved sketches so that user can continue adding or erase drawing after exiting. how webStorage: local is functioning actually.

[User add drawing] -> [database] and retrieve drawing from database and show it on drawingboard.

Thanks :)

The line is stranger after resize the canvas. Check the image: http://cl.ly/image/2W0t2v2N1B3L.

I resize the canvas with css width and height.

This is awesome. Any plans to add text input? I would use this to help explain/teach code by typing out a line or two on the canvas and drawing around it. (I guess I could just add it myself, but I'd have to find time first!)

First of all i want to say thanks to Leimi for this awesome drawing app! Before i tried drawingboard.js i made use of Sketch.js. I noticed that in comparison to Sketch.js Drawingboard.js has better performance and has a better output quality, but it also creates bigger files. Please tell me if im wrong but i think the images are also bigger because they have by default an white background,with sketch.js the backround is transparent! So is it possible to remove the white background? Or is it somehow possible to cut some of the white space, for e.g if i only draw in one corner?

Hi,

The drawing function is running perfectly, on differents browser I get my images in session storage without any problem ... but it's not working on Android 2.2, 2.3.x (Galaxy S and S2), I can draw on those systems, but nothing is stored, redraw of the page give a white drawing space ... I don't find really any way to debug this situation ...

Any idea, or help will be greatfull.
Thanks,
Hervé

   if (this.opts.reset) el += '<button class="drawing-board-control-navigation-reset">&times;</button>';

instead of

   if (this.opts.reset) el += '<button class="drawing-board-control-navigation-reset">×</button>';

in Firefox I don't see "x"

When I offer my drawingboard a "Download" option, someone can download his drawing. I have tried to open it with a photo viewer and it's okay. However, there isn't a file extension after file name. I consider it may confuse other users.
Hope to have an argument to fix that.

All e.preventDefault() calls in the code should have a e.stopPropagation(); call added on the next line, to prevent event bubbling

When we draw with background added to the canvas, it always draw on top of the image and cover the figure with selected color. Is there a way to color below the setimage so that the borders of the image remain intact

Hello,

I know there is a DROP function but will be very nice a replace background like per example with a URL.createObjectURL(file) or onClick function. With this, the user will change the previous image to another pre-saved in the page.

Drawings on the canvas occur when only hovering the canvas when you follow these steps:

• start drawing by holding the mouse button pressed on the canvas
• leave the canvas, still holding mouse button pressed
• release the mouse button
• go back on the canvas: the board thinks we still hold the mouse button and continues to draw

Current method to prevent this behavior doesn't work on all browsers (at least not in Firefox)

I'm building a digit recogniser using Convolutional neural networks, and i intend to use the image in the drawing board and convert it to an rgb array, how can i do that??

As seen in the gif, when you draw lines quickly and your mouse comes out and back in the board, there is a delay before lines are drawn.

I guess drawing events should be put on the body element instead of only the canvas.

When you click on the board to draw without moving, a dot should be drawn.
Only Firefox seems to behave like this. Other browsers only start drawing on mouse move.

When attempting to save and download an image I get the following error:
SCRIPT122: The data area passed to a system call is too small.
board.js, line 318 character 3

tested on Windows 7 enterprise IE9 version 9.0.8112.16421

We just ran an application using drawingboard.js through a full QA sweep, and on Android devices we've found that changing the width of the drawing/erasing tool with the slider doesn't actually change the size.

The slider moves, but the size of the tools stays the same. Other browsers/devices works as expected.

Sorry if does not appear like an issue but I want the exact same color to be painted. When I open the image in MSPaint and try it's filler on the painted part this is the image I get.

Original

MSpaint filled

This suggest color is not same. Looks like pencil is applying series of strokes with anti aliasing. Drawingboards filler has no problem with it. Do you know any workaround for this?

Awesome little program. Has someone made it work on an ipad where it's easier to doodle?

Is there some way to perform the undo and redo operations using the keyboard shortcuts ctrl+z and ctrl+y

I am trying to use drawing board in real time so that it can be shared between multiple users. I want to capture the stream of drawing board and to share it with other user at run time.

where is the bower_components folder?

https://github.com/Leimi/drawingboard.js/blob/master/js/board.js#L468

The right should be
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

Have a smaller controls container + have an option to decide where to put/align the controls.

When a background image is set and you undo the very first thing you've done the entire background image is removed and you're left with a transparent background.

The eraser does not work as expected when a background image is set. Even when the eraserColor is set to transparent, it erases the image with a color.

would be a cool feature

Hi there,

On the drawing board if you adjust the thickness of the pen tool and than one click on the drawing canvas you can observe that it prints a half circle .

hi, I want to know how to trigger reset or other events on my own DOM element but cannot find in the document.

Hello! How to use your pattern as a brush?

Drawingboard.js is great but I just can't save any drawing on the server, using the indicated github : https://gist.github.com/Leimi/9179019.
It returns a zero octet file.
I'm afraid "board.getImg()" fails returning anything.
Can you help ?