Argthtjtr

I have image on html canvas i want to add crop functionality using jquery and html canvas.I have already added gradient effect to image but only remaining is that to add crop functionality.My concept is that user can select some portion of image by mouse he can draw one rectangle (crop box) on canvas image and he click on crop button then he can save only cropped image on his local disk

html

    <canvas id="canvas" style="height:500;width:600;"></canvas>

    <input type="color" id="color" name="color"

    value="#f6b73c">

    <button id="cropImage">Crop</button>

javascript

var mouse = {

        down: false,

        x1: null,

        y1: null,

        x2: null,

        y1: null

      };

      var grad = 'transparent';

      var ctx = canvas.getContext('2d');

      var img = new Image();

      img.onload = init;

      img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/D%C3%BClmen%2C_Kirchspiel%2C_B%C3%B6rnste%2C_Feld_--_2017_--_3171.jpg/500px-D%C3%BClmen%2C_Kirchspiel%2C_B%C3%B6rnste%2C_Feld_--_2017_--_3171.jpg";

      function updateGrad() {

        var cx = mouse.x1;

        var cy = mouse.y1;

        var dist = Math.hypot(mouse.x1-mouse.x2, mouse.y1-mouse.y2);          

        grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, dist);        

        grad.addColorStop(1, color);

        grad.addColorStop(0, 'transparent');

      }

      function draw() {

        // draw the image

        ctx.drawImage(img, 0,0);

        // draw the gradient

        ctx.fillStyle = grad;

        ctx.fillRect(0,0,canvas.width,canvas.height);

        // draw the line?

        ctx.beginPath();

        ctx.rect(mouse.x1 - 4, mouse.y1 - 4, 8, 8);

        ctx.moveTo(mouse.x1, mouse.y1);

        ctx.lineTo(mouse.x2, mouse.y2);

        ctx.rect(mouse.x2 - 4, mouse.y2 - 4, 8, 8);

        ctx.stroke();



      } 



      function init() {

        canvas.width = this.width;

        canvas.height = this.height;

        canvas.onmousedown = mousedown;

        document.onmousemove = mousemove;

        document.onmouseup = mouseup;

        ctx.strokeStyle = 'white';

        draw();

      }      

      function mousedown(evt) {

        var rect = canvas.getBoundingClientRect();

        mouse.down = true;

        mouse.x1 = evt.clientX - rect.left;

        mouse.y1 = evt.clientY - rect.top;

      }      

      function mousemove(evt) {

        if(!mouse.down) return;

        var rect = canvas.getBoundingClientRect();

        mouse.x2 = evt.clientX - rect.left;

        mouse.y2 = evt.clientY - rect.top;

        updateGrad();

        draw();

      }      

      function mouseup(evt) {

        mouse.down = false;

      }