sketch.js paint program image processing issue

sketch.js paint program image processing issue

Hi,
I am testing out the sketch.js with html5 and canvas for a paint program here. There are two problems that I encountered.
First is I want to be able to dynamically change the background cat image example for canvas.
  1. <canvas id="SketchPad" width="800" height="300" style="background: url(http://farm1.static.flickr.com/91/239595759_3c3626b24a_b.jpg) no-repeat center center;"></canvas>
I tried to change the background with the code I found.
  1. $('#file-input').change(function (e) {
  2.         var file = e.target.files[0],
  3.             imageType = /image.*/;

  5.         if (!file.type.match(imageType))
  6.             return;

  8.         var reader = new FileReader();
  9.         reader.onload = fileOnload;
  10.         reader.readAsDataURL(file);
  11.     });

  13.     function fileOnload(e) {
  14.         var src = e.Target.file[0];
  15.         document.getElementById("SketchPad").style = "background: " + e.target.result + " no-repeat center center";
  16.     }
But as soon as I try to draw over this newly loaded style background image it disappears, the cat image from the canvas is able to stay if I attempt to draw on it.

Second is I want to be able to download the image, when I try to download the cat image with the drawing on top on the drawn image is downloaded. If I attempt to download the background image I uploaded then it stays, is there a way to combine the drawing with the background image for download?

Please let me know if this is the right place to post, thanks.