Corte poligonal responsivo com JavaScript

[Melkis 0]

Estou com um grande problema tenho imagens irregulares preciso recorta-las e salvar em um outro arquivo, até aí tudo bem, o problema é que o sistema que estou criando é totalmente responsivo, e o script abaixo delimita o tamanho da imagem, o script está cortando, salvando aimagem em png, tudo está funcionando perfeitamente, o único problema é ele não se adequar responsivo, quem souber como posso pegar os eixos x e y atuais da tela e coloca-los dentro das variáveis que fazem, pois tentei o .resize mas não deu certo, Aguardo anciosamente a resposta, muito obrigado seguem os links para que possam entender o eu eu estou querendo fazer:

Para terem uma ideia melhor do que estou falando segue o link de um site com cropper.js em quadros e responsivo: https://fengyuanchen.github.io/cropperjs/

E aqui o link com exemplo de crop poligonal, https://netplayer.gr/crop/

Arquivo 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);

        });

   // }
});

});

Para interessados em testar é só adicionar as tags:

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>

 

e colocar um <canvas> no <body> da pagina:

 

<canvas id="myCanvas"></canvas>

 

Desde já Muito Obrigado a todos

 

javascript canvas jcrop