Fork me on GitHub

JQuery dRawr


dRawr is a JQuery plugin that can transform any canvas component (with a container) into a drawing area. It's developed for iOS, Android, and most desktop browsers.
The only requirement at the moment is material design icons.

download View on github

Example 1 destroy initialize
	//Code for Example 1

	html

	<div style="width:350px;height:300px;border:2px dotted gray;margin:20px;">
		<canvas id="canvas1"></canvas>
	</div>
	
	js
	
	//Turn a canvas element into a sketch area
	$("#canvas1").drawr({
		"enable_tranparency" : true,
	    "canvas_width" : 800,
	    "canvas_height" : 800,
	    "clear_on_init" : false
	});

	//Enable drawing mode, show controls
	$("#canvas1").drawr("start");

	function destroy(){
		$("#canvas1").drawr("destroy");
	}
}

Features
  1. Drawing area
  2. Extensible brush system, lots of default brushes
  3. Custom buttons
  4. Loading and saving images
  5. Excellent mobile support
  6. Basic pen pressure support for samsung and apple devices
  7. Text insertion
  8. Undo
  9. planned:
  10. Wacom tablet support
  11. Support for other icon fonts like font awesome
  12. Many more things.
Methods
  1. start
  2. stop
  3. load
  4. export
  5. button
  6. destroy
Options
  1. enable_tranparency
  2. canvas_width
  3. canvas_height
  4. undo_max_levels(5)
  5. color_mode("presets","picker")
  6. clear_on_init
Events
  1. nvt nog
Example 2
	//Code for Example 2 (preset colors, no transparency)

	html

	<div style="width:350px;height:300px;border:2px dotted gray;margin:20px;">
		<canvas id="canvas2"></canvas>
	</div>
	
	js

	//Turn a canvas element into a sketch area
	//width and height are grabbed automatically.
	$("#canvas2").drawr({
		"enable_tranparency" : false,
		"color_mode" : "presets"
	});

	//Enable drawing mode, show controls
	$("#canvas2").drawr("start");

There's a few other features, such as loading, saving an image, adding custom buttons. Those are demonstrated below:
	//Code for Example 3

	html

	<div style="width:350px;height:300px;border:2px dotted gray;margin:20px;">
		<canvas id="canvas3"></canvas>
	</div>
	<input type="file" id="file-picker" style="display:none;">
	
	js
	
	//Turn a canvas element into a sketch area
	//width and height are grabbed automatically.
	$("#canvas3").drawr({
		"enable_tranparency" : false
	});

	//Enable drawing mode, show controls
	$("#canvas3").drawr("start");

	//add custom save button.
	var buttoncollection = $("#canvas3").drawr("button", {
		"icon":"mdi mdi-folder-open mdi-24px"
	}).on("touchstart mousedown",function(){
		$("#file-picker").click();
	});
	var buttoncollection = $("#canvas3").drawr("button", {
		"icon":"mdi mdi-content-save mdi-24px"
	}).on("touchstart mousedown",function(){
		var imagedata = $("#canvas3").drawr("export","image/jpeg");
		var element = document.createElement('a');
		element.setAttribute('href', imagedata);
		element.setAttribute('download', "test.jpg");
		element.style.display = 'none';
		document.body.appendChild(element);
		element.click();
		document.body.removeChild(element);
	});
	$("#file-picker")[0].onchange = function(){
		var file = $("#file-picker")[0].files[0];
		if (!file.type.startsWith('image/')){ return }
		var reader = new FileReader();
		reader.onload = function(e) { 
			$("#canvas3").drawr("load",e.target.result);
		};
		reader.readAsDataURL(file);
	};



I hope you find this plugin useful somehow! Try a fullscreen drawing session!
This project is maintained by Lieuwe Prins