How to use a new img generated in a canvas, in another canvas

Vote count: 0

I use a canvas for cropping a jpg, i wish use this cropped img in another canvas

/**************CANVAS cropping img *********/

  var canvas1 = document.getElementById('Canvas1');
  var context1 = canvas1.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    // draw cropped image
    var sourceX = 90;
    var sourceY = 0;
    var sourceWidth = 319;
    var sourceHeight = 319;
    var destWidth = sourceWidth;
    var destHeight = sourceHeight;
    var destX = canvas1.width / 2 - destWidth / 2;
    var destY = canvas1.height / 2 - destHeight / 2;

    context1.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
  };
  imageObj.src = 'OriginImg.jpg';

/**************CANVAS using cropping img *********/

  var canvas2 = document.getElementById('Canvas2');
  var context2 = canvas2.getContext('2d');
  var img = new Image();
  img.src = canvas1;
  context2.drawImage(img, 10,10);

asked 34 secs ago

gurrumo

Let's block ads! (Why?)

How to use a new img generated in a canvas, in another canvas