html2canvasは左上の画像をレンダリングしません

Question

ウェブページにグラフがあり、html2canvasを使って画像に展開しています。抽出された画質はぼやけており、サイズを4倍大きくすることで画質を向上させたいと考えています。

正常な機能：

function exportChart() { 
html2canvas($("[id$='extract']"), { 
    onrendered: function (canvas) { 
     var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
     var a = document.createElement('a'); 
     a.href = image; 
     a.download = 'chart.png'; 
     a.click(); 
    } 
}); 

大きいサイズ機能：

function exportChart(e) { 
var scaleBy = 4; 
var w = 1000; 
var h = 1000; 
var div = document.querySelector('#extract'); 
var canvas = document.createElement('canvas'); 
canvas.width = w * scaleBy; 
canvas.height = h * scaleBy; 
canvas.style.width = w + 'px'; 
canvas.style.height = h + 'px'; 
var context = canvas.getContext('2d'); 
context.scale(scaleBy, scaleBy); 

html2canvas(div, { 
    canvas:canvas, 
    onrendered: function (canvas) { 
     var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
     var a = document.createElement('a'); 
     a.href = image; 
     a.download = 'chart.png'; 
     a.click(); 
    } 
}); 

結果は、私はより良い品質の画像を得たが、それは正常な機能のために発生しません左上に置かれていないです。 左上に大きな画像（右側）を配置するにはどうすればよいですか？ For your reference

Answer 1

context.scale()関数はキャンバス内のImageの開始位置も変更することが判明しました。

このように私は記述したように結果を得るでしょう。