Jump to content

Canvas drawing script help


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...