-
Notifications
You must be signed in to change notification settings - Fork 1
Draw with your mouse on an HTML canvas.
License
Gagege/JRPad
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
JRPad by Gage Herrmann Version 0.9.2 Released 2010-11-20 Contact the author: [email protected] This library requires jQuery and RaphaelJS to work. You can find these at: jquery.com and raphaeljs.com respectively. --------INSTALLATION-------- Include jQuery, RaphaelJS and JRPad in the head of an html document. Example: <SCRIPT LANGUAGE="JavaScript" type="text/javascript" SRC="jQuery.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" type="text/javascript" SRC="raphael.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" type="text/javascript" SRC="JRPad.js"></SCRIPT> --------USAGE-------- It's probably a good idea to be fairly familiar with jQuery before using JRPad: http://docs.jquery.com/Main_Page JRPad tutorial coming soon at http://www.herrmannfam.com/jrpad -Put all JRPad calls inside of a jQuery $(document).ready function. -You must pass the id of the div element you want the JRPad to be in to JRPad's constructor: var newPad = new JRPad("drawingArea"); (note that the "#" symbol before the id is not needed) -And have a div like: <div id="drawingArea" style="width:200px; height:400px;"></div> (JRPad will size itself to to 200 by 400 pixels automatically) -Here's the messy part. Include this code (Assuming your div is named "drawingArea". You can of course call it whatever you want.): $("#drawingArea").mousedown( function(e) { newPad.setMouseDown(true); newPad.drawDot(e); return false; }).mouseup( function() { newPad.setMouseDown(false); }); $("#drawingArea").mousemove( function(e) { panewPad.drawLine(e); }); -Other functions available: .eraser(); //changes the stroke color to the same color as the background. Call it in a jQuery click event for best results. .setColor(colorValue) //can take html color names ("red", "green", "black") or hex color values ("#000000", "#3f2a5e"). .setWidth(widthValue) //pass an int or a decimal to it to change the width (thickness, size, whatever) of the "brush".
About
Draw with your mouse on an HTML canvas.
Resources
License
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published