javascript - Set size of image from canvas -

so i'm using protractor in project , in test want convert canvas element image specific size. have conversion down can't seem change size of image. here's code:

it('should save image', function(done) {   //because of protractor   browser.driver.executescript(function () {     var can = document.queryselector('#workspace-canvas');     var data = can.todataurl("image/png");      var image = new image();     image.width = 500;     image.height = 500;     image.src = data;     console.log(image.height, image.width); //1122 1888     var link = document.createelement('a');     link.href = image.src;     link.download = 'study-chart.png';     link.click();      return data;   }).then(function (result) {     browser.sleep(2000);     done();   }); }); 

i'm not able change size of canvas. in fiddle can see image size changed in dom, when download it, image 200x200 pixels because of canvas size. missing?

the problem adjusting width , height of image element doesn't change original size. appear larger when displayed in browser, original size of image still size of canvas.

i've modified fiddle show how can create new image desired size dynamically creating new canvas specified width , height , drawing original image on it.

var can = document.queryselector('#canvas1');  var ctx = can.getcontext('2d');  ctx.fillrect(50, 50, 50, 50);    var img = new image();  img.src = can.todataurl();  var link = document.createelement('a');  var img2 = resizeimage(img, 500, 500);  link.href = img2.src;  link.download = 'study-chart.png';  link.click();      function resizeimage(img, w, h) {    var result = new image();    var canvas = document.createelement('canvas');    canvas.width = w;    canvas.height = h;    canvas.getcontext('2d').drawimage(img, 0, 0, w, h);    result.src = canvas.todataurl();    return result;  }

canvas {    border: 1px solid gray;  }

<canvas id="canvas1" width="200" height="200"></canvas>