williammalone / simple-html5-drawing-app Goto Github PK

Hi, is it possible to make the canvas responsible? It would be nice to use it within an app.

Thanks

I have scripted using app-script, but this is my first attempt to really create a full blown app. So it is very possible that it is user error.

I got your code running on a touch-screen chromebook (using Chrome Dev Editor), and it launches and runs fine with a mouse. But when I use the touch-screen to draw it doesn't work. I am only able to click the other elements like color, and size, but drawing doesn't work with touch, only the mouse.

Hi there,
I was reading your tutorial here and then was looking for the comments section but only found your github - http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

I am trying to create a canvas editor as this firefox addon has done - https://addons.mozilla.org/en-US/firefox/addon/nimbus-screenshot/?src=userprofile

They draw shapes on a single canvas, and when i mouse over that shape they show "end points" on it, and i can click and drag the end points to resize/reshape arrow or square or circle. And move it around even. They have done this magic all on a single canvas. I was hoping to do the same too, but couldn't find a tutorial as nice as yours.

Could you please write about how they did this?

Thanks

Hey. Awesome work.

I am trying to implement this in my website, but when i try to save the canvas value and display it in the browser (or in a base64 decoder) both only shows half the image.

I tried with other drawing applications and the value gets displayed correctly in the browser and base64 decoder.

var dataurl = canvas_simple.toDataURL(); console.log(dataurl);
If you copy the console.log value and paste it in your browser URL or even a base64 decoder (https://codebeautify.org/base64-to-image-converter) you can see that the full image isn't there.

Even with touch events being added, the page scrolls when the canvas is touched and nothing gets drawn.

hi,
is there any way to combine HTML5-Drawing-App with paint bucket app that you made.
thanks

Hi,

I need to know if the canvas result can saved into MySql Database like a the path of the image created.

hi,
in this app, when you draw with pastel and want to draw different area with marker, you can not. once you choose other texture, new texture applies to your drawing. is there any way to use different textures in the same drawing. maybe you can add more textures. for example wood, brick, marble etc.
thanks...

have you thought about saving the finished image? just curious. .

Hi @williammalone
I was reading your tutorial here and then was looking for the comments section but only found your github - http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

First at All thanks for the Code Every things work fine Great Job
so the minor issue is when page is refresh the drawing line move-up (like 5mm height) can you guide me how to resolve this not to move-up the drawing line.

I would Appreciate if you could Help Us

Thanks & Regards
Suresh

Thanks for the great tutorial.

But I have found an issue: when testing this in Firefox (v 21.0) the canvas flickered a lot. This issue can be solved by simply moving one line in the code.

Move 'context.save()' from line 223 to line 130. Right before calling clearCanvas().

This stops FF from redrawing a blank canvas when calling context.clearRect() from within the clearCanvas-function.

The application still seems to work properly in IE and Chrome and no longer flickers in FF. (I haven't tested with any other browsers.)

Thanks again for the great tutorial!

Hi @williammalone. Do you plan to choose a license for the project?

I would like to use this with pictures taken by the device camera, but when I load an image, the image comes the to highest level of z axis. How can I change the so that the image is in the back?

example: https://srybm.redirectme.net/testPhoto4.php