background-image resized to draw on canvas

background-image resized to draw on canvas

I am trying to download a canvas image based on sketch.js and the solution I find is as below. I previously set up and resized a background image on the canvas like this on the SketchPad based on a selector. Then I load in the image from an input.

  1. $('#file-input').change(function (e) {
  2.         var file = e.target.files[0],
  3.             imageType = /image.*/;

  5.         if (file === undefined)
  6.             return;

  8.         if (!file.type.match(imageType))
  9.             return;

  11.         img = new Image();

  13.         img.onload = function () {
  14.             nimg_width = this.width;
  15.             nimg_height = this.height;

  17.             var reader = new FileReader();
  18.             reader.onload = fileOnload;
  19.             reader.readAsDataURL(file);
  20.         };

  22.         img.src = _URL.createObjectURL(file);
  23.             
  24.     });

  1. if ($("#imageSIZE").val() == "original") {
  2.             img_width = nimg_width;
  3.             img_height = nimg_height;
  4.             myCanvas.width = img_width;
  5.             myCanvas.height = img_height;
  6.             $("#SketchPad").css({
  7.                 'background-image': bgi,
  8.                 'background-size': img_width+"px "+img_height+"px"
  9.             });
  10.         }

Now I want to download my drawing on top of the background image, the background image is loaded in from an input file and resized so I am not sure how to retrieve it. I tried to use the method from here.
  2.         Sketch.prototype.download = function (format) {
  3.             var mime;
  4.             format || (format = "png");
  5.             if (format === "jpg") {
  6.                 format = "jpeg";
  7.             }
  8.             mime = "image/" + format;
  9.             
  10.             var myCanvas = document.createElement('canvas');
  11.             var ctx = myCanvas.getContext('2d');

  13.             myCanvas.width = $('#SketchPad')[0].width;
  14.             myCanvas.height = $('#SketchPad')[0].height;

  16.             var bg = $('#SketchPad').css('background-image');
  17.             var bf = $('#SketchPad').css('background-size');

  19.             bf = bf.replace('px', '').replace('px', '');
  20.             var ret = bf.split(" ");

  22.             bg = bg.replace('url(', '').replace(')', '').replace('"', '').replace('"', '');

  24.             var im = new Image();

  26.             im.onload=function()
  27.             {
  28.                 ctx.drawImage(im, 0, 0, ret[0], ret[1]);

  30.                 ctx.drawImage($('#SketchPad')[0], 0, 0);

  32.                 return window.open(myCanvas.toDataURL(mime));
  33.             }

  35.             im.src = bg;

  37.             
  38.         };
Please let me know how I can get the resized background-image and draw it on the canvas. Thanks.

P.S. Nevermind I got it, code modified, thanks for help!