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.
//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
//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!