Corte poligonal responsivo com JavaScript

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](https://pt.stackoverflow.com/questions/tagged/javascript) [canvas](https://pt.stackoverflow.com/questions/tagged/canvas) [jcrop](https://pt.stackoverflow.com/questions/tagged/jcrop)