Jump to content

Canvas drawing script help


redcell1984

Recommended Posts

Hello, I recently posted asking how to add the ability to draw in a browser on my website and was advised to look into javascript and specifically canvas. I have never used javascript and am struggling to work out how to adapt some code I've found. Can anyone help please? This is essentially what I want to achieve but instead with a white background and fine dark grey line, and with a smoother line. I also want it to start drawing as soon as the mouse enters area and does not require mouse click. I tried altering the mousedown to achieve this but no success:http://jsfiddle.net/loktar/dQppK/4/ This open source code, although far more complicated than I need, employs the desired line smoothing:http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html I think this should link to the code for the above:view-source:http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html If anyone can give any help to nudge me along that would be greatly appreciated. Thanks

Link to comment
Share on other sites

You should be able to set the background color with CSS. The drawing color is where the code uses fillStyle, you can move that line to after the line that calls fillRect. In order to not require a mouse click then you would remove the mousedown handler, and inside the mousemove handler remove the if statement that checks the painting variable, since you always want that code to run whenever they move the mouse. As for SVG-edit, you're not going to be able to implement line smoothing like they do there. If you notice, as you're drawing the line it is jagged, and only becomes smooth when you stop drawing. Yours never stops drawing.

Link to comment
Share on other sites

Thanks very much for your help! I have tried what you suggested but the only one I successfully altered was the fillStyle:http://jsfiddle.net/dQppK/257/ Then, after making any of the other alterations in JSFiddle the result section just goes blank and doesn't react:http://jsfiddle.net/dQppK/255/ Another code I found looks like it might be a more efficient way to do the same job, if I alter the pen style to suit my needs, but I can't get the code to work in JSFiddle:http://jsfiddle.net/dQppK/252/ Can anyone suggest where I'm going wrong and whether the third code would be a better source code to use. Thanks

Edited by redcell1984
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...