$.fn.respondosketch = function(e) {

    var canvas = this;
    var ctx = $(this)[0].getContext('2d');

    var mouse = {x: 0, y: 0};
    var sketch = false;
    var drawing = new Array();

    var width = canvas.width();
    var height = canvas.height();

    /* Drawing on Paint App */
    ctx.lineWidth = 5;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'black';

    $(window).resize(function(e) {
        var newWidth = $(window).width();
        var newHeight = $(window).height();

        var xScale = newWidth/width;
        var yScale = newHeight/height;

        for (var i = 0; i < drawing.length; i++) {
            drawing[i].x *= xScale;
            drawing[i].y *= yScale;
        }

        setSize(newWidth, newHeight);

        redraw();
    });

    canvas.on('mousedown', function(e) {
        sketch = true;

        drawing.push({
            x: mouse.x,
            y: mouse.y,
            type: e.type
        });
    });

    canvas.on('mousemove', function(e) {
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;

        if (sketch) {
            drawing.push({
                x: mouse.x,
                y: mouse.y,
                type: e.type
            });
            redraw();
        }
    });

    canvas.on('mouseup mouseleave', function(e) {
        sketch = false;
    });

    function init() {
        var width = $(window).width();
        var height = $(window).height();

        setSize(width, height);
    }

    function setSize(w, h) {
        width = w;
        height = h;

        canvas.width(width);
        canvas.height(height);

        canvas[0].setAttribute('width', width);
        canvas[0].setAttribute('height', height);
    }

    function redraw() {
        ctx.beginPath();
        for (var i = 1; i < drawing.length; i++) {

            if (drawing[i].type == 'mousemove') {
                ctx.moveTo(drawing[i - 1].x, drawing[i - 1].y);
            } else {
                ctx.moveTo(drawing[i].x, drawing[i].y);
            }


            ctx.lineTo(drawing[i].x, drawing[i].y);
            ctx.stroke()
        }
        ctx.closePath();
    }

    function toJson() {
        return JSON.stringify(drawing);
    }

    init();
};
@@ -20,25 +20,29 @@
  = function(
-e
+props
 ) %7B%0A%0A    var
@@ -113,29 +113,90 @@
 var 
-mouse = %7Bx: 0, y: 0%7D;
+backgroundColor = props.backgroundColor;%0A    var aspectRatio = props.aspectRatio;%0A
 %0A   
@@ -510,32 +510,38 @@
  newWidth = 
-$(window
+canvas.parent(
 ).width();%0A 
@@ -563,34 +563,38 @@
 eight = 
-$(window).height()
+newWidth / aspectRatio
 ;%0A%0A     
@@ -873,66 +873,239 @@
     
-canvas.on('mousedown', function(e) %7B%0A        sketch = true
+var startEvent = 'mousedown touchstart';%0A    canvas.on(startEvent, function(e) %7B%0A        if (e.type == 'touchstart') %7B%0A            e.preventDefault();%0A        %7D%0A%0A        sketch = true;%0A%0A        var mouse = getMouseLocation(this, e)
 ;%0A%0A 
@@ -1215,42 +1215,102 @@
 %7D);%0A
-    %7D);%0A%0A    canvas.on('mousemove'
+%0A        redraw();%0A    %7D);%0A%0A    var moveEvent = 'mousemove touchmove';%0A    canvas.on(moveEvent
 , fu
@@ -1333,87 +1333,45 @@
     
+var 
 mouse
-.x
  = 
-e.pageX - this.offsetLeft;%0A        mouse.y = e.pageY - this.offsetTop
+getMouseLocation(this, e)
 ;%0A%0A 
@@ -1564,26 +1564,31 @@
 );%0A%0A    
-canvas.on(
+var endEvent = 
 'mouseup
@@ -1598,17 +1598,50 @@
 useleave
-'
+ touchend';%0A    canvas.on(endEvent
 , functi
@@ -1723,24 +1723,30 @@
 width = 
-$(window
+canvas.parent(
 ).width(
@@ -1773,60 +1773,580 @@
 t = 
-$(window).height();%0A%0A        setSize(width, height);
+width / aspectRatio;%0A%0A        canvas.css('background-color', backgroundColor);%0A%0A        setSize(width, height);%0A    %7D%0A%0A    function getMouseLocation(element, event) %7B%0A        if (event.type.indexOf('touch') !== -1) %7B%0A            return %7B%0A                x: event.originalEvent.touches%5B0%5D.pageX - element.offsetLeft,%0A                y: event.originalEvent.touches%5B0%5D.pageY - element.offsetTop%0A            %7D%0A        %7D else %7B%0A            return %7B%0A                x: event.pageX - element.offsetLeft,%0A                y: event.pageY - element.offsetTop%0A            %7D;%0A        %7D
 %0A   
@@ -2731,16 +2731,50 @@
 usemove'
+ %7C%7C drawing%5Bi%5D.type == 'touchmove'
 ) %7B%0A    

Maintain Aspect Ratio, iPhone/Android Support