redcell1984 Posted March 22, 2013 Share Posted March 22, 2013 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 More sharing options...
justsomeguy Posted March 23, 2013 Share Posted March 23, 2013 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 More sharing options...
redcell1984 Posted March 23, 2013 Author Share Posted March 23, 2013 (edited) 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 March 23, 2013 by redcell1984 Link to comment Share on other sites More sharing options...
justsomeguy Posted March 25, 2013 Share Posted March 25, 2013 In the second code, you removed the first part of the if statement and the opening bracket, but you didn't remove the closing bracket at the end of the function. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now