How to make a polygonal crop responsive

I have a big problem I have irregular images I need to trim them and save them to another file, so far so good, the problem is that the system I'm creating is totally responsive, and the script below delimits the image size, is cutting, saving everything in this script is working perfectly, the only problem is it does not suit responsive, I already tried to use the bootstrap and also incorporate cropperjs that works with cut in the responsive method but did not succeed.

To get a better idea of what I'm talking about, follow the link of a site with crop in frames and responsive: link

And here the link with polygonal crop example, link

  

File crop_poligonal.js:

//funçao para fazer um crop na imagem
$(document).ready(function() {
var condition = 1;
var points = [];//holds the mousedown points
var canvas = document.getElementById('myCanvas');
this.isOldIE = (window.G_vmlCanvasManager);
$(function() {
  //  if (document.domain == 'localhost') {

        if (this.isOldIE) {
            G_vmlCanvasManager.initElement(myCanvas);
        }
        var ctx = canvas.getContext('2d');
        var imageObj = new Image();
        function init() {
            canvas.addEventListener('mousedown', mouseDown, false);
            canvas.addEventListener('mouseup', mouseUp, false);
            canvas.addEventListener('mousemove', mouseMove, false);
        }
        // Draw  image onto the canvas
        imageObj.onload = function() {
            ctx.drawImage(imageObj, 0, 0);
        };
        imageObj.src = "img.png"; 

// Switch the blending mode
        ctx.globalCompositeOperation = 'destination-over';

        //mousemove event
        $('#myCanvas').mousedown(function(e) {
            if (condition == 1) {

                ctx.beginPath();

                $('#posx').html(e.offsetX);
                $('#posy').html(e.offsetY);
            }
        });
        //mousedown event
        $('#myCanvas').mousemove(function(e) {
            if (condition == 1) {

                if (e.which == 1) {
                    var pointer = $('<span class="spot">').css({
                        'position': 'absolute',
                        'background-color': '#000000',
                        'width': '5px',
                        'height': '5px',
                        'top': e.pageY,
                        'left': e.pageX


                    });
                    //store the points on mousedown
                    points.push(e.pageX, e.pageY);

                    //console.log(points);

                    ctx.globalCompositeOperation = 'destination-out';
                    var oldposx = $('#oldposx').html();
                    var oldposy = $('#oldposy').html();
                    var posx = $('#posx').html();
                    var posy = $('#posy').html();
                    ctx.beginPath();
                    ctx.moveTo(oldposx, oldposy);
                    if (oldposx != '') {
                        ctx.lineTo(posx, posy);

                        ctx.stroke();
                    }
                    $('#oldposx').html(e.offsetX);
                    $('#oldposy').html(e.offsetY);
                }
                $(document.body).append(pointer);
                $('#posx').html(e.offsetX);
                $('#posy').html(e.offsetY);
            }//condition
        });

        $('#crop').click(function() {
            condition = 0;

            //  var pattern = ctx.createPattern(imageObj, "repeat");
            //ctx.fillStyle = pattern;
            $('.spot').each(function() {
                $(this).remove();

            })
            //clear canvas

            //var context = canvas.getContext("2d");
//Delimita o tamanho da imagem isso já retira a base responsiva da imagem
            ctx.clearRect(0, 0, 600, 600);
            ctx.beginPath();
            ctx.width = 350;
            ctx.height = 350;
            ctx.globalCompositeOperation = 'destination-over';
            //draw the polygon
            setTimeout(function() {


                //console.log(points);
                var offset = $('#myCanvas').offset();
                //console.log(offset.left,offset.top);


                for (var i = 0; i < points.length; i += 2) {
                    var x = parseInt(jQuery.trim(points[i]));
                    var y = parseInt(jQuery.trim(points[i + 1]));


                    if (i == 0) {
                        ctx.moveTo(x - offset.left, y - offset.top);
                    } else {
                        ctx.lineTo(x - offset.left, y - offset.top);
                    }
                    //console.log(points[i],points[i+1])
                }

                if (this.isOldIE) {

                    ctx.fillStyle = '';
                    ctx.fill();
                    var fill = $('fill', myCanvas).get(0);
                    fill.color = '';
                    fill.src = element.src;
                    fill.type = 'tile';
                    fill.alignShape = false;
                }
                else {
                    var pattern = ctx.createPattern(imageObj, "repeat");
                    ctx.fillStyle = pattern;
                    ctx.fill();

                    var dataurl = canvas.toDataURL("image/png");


                    //upload to server (if needed)
                    var xhr = new XMLHttpRequest();
                    // // 
                    xhr.open('POST', 'upload.php', false);
                    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    var files = dataurl;
                    var data = new FormData();
                    var myprod = $("#pid").val();
                    data = 'image=' + files;
                    xhr.send(data);
                    if (xhr.status === 200) {
                        console.log(xhr.responseText);
                        $('#myimg').html('<img src="upload/' + xhr.responseText + '.png"/>');
                    }



                }
            }, 20);

        });

   // }
});

});