HTML5 canvas save actual size image

Question

I have a html5 canvas where I am showing image as 350x450 pixles.

But actual size of image is 600x900 px.

How can I save it in original size.

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();
  ctx.canvas.width = 350;
  ctx.canvas.height = 450;
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0,100,100);
  };
imageObj.src = 'https://davidwalsh.name/demo/ringo-ftw.jpg';
var base64 = canvas.toDataURL();

As you see when Im getting base64 Image size is reduced. I am getting image 350x450. But I want to save it in 600x900.

Is there any way ?

Answer 1

Basically what I am doing in below code is that>

I am creating a temp canvas element with display: none style & also load an image into that and save from this while show original canvas.

 var canvas = document.getElementById('my_canvas');
 var tempCanvas = document.getElementById('temp_canvas'); // use style  display : none  for this temp element 
 var ctx = canvas.getContext('2d');
 var tempCtx = tempCanvas.getContext('2d');
 var imageObj = new Image();
 ctx.canvas.width = 350;
 ctx.canvas.height = 450;
 imageObj.onload = function() {
     ctx.drawImage(imageObj, 0, 0,100,100);
     tempCtx.drawImage(imageObj, 0, 0,100,100);
 };
imageObj.src = 'https://davidwalsh.name/demo/ringo-ftw.jpg';
var base64 = tempCanvas.toDataURL();