 <p>According to documentation for <a href="https://developer.mozilla.org/ru/docs/Web/API/CanvasRenderingContext2D/drawImage" rel="nofollow">CanvasRenderingContext2D.drawImage()</a> function:</p> <blockquote> <p>ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);</p> </blockquote> <p><em>sx, sy, sWidth, sHeight</em> are parameters of the <strong>sub-rectangle</strong> of the source image <br>In your case: parameters <strong><em>sx, sy, sWidth, sHeight</em></strong> should coincide with parameters <strong><em>dx, dy, dWidth, dHeight</em></strong> (in most simple case)<br> Change your <code>imageObj.onload</code> handler as shown below:</p> <pre><code>... imageObj.onload = function() { context.drawImage(imageObj, x, y, width, height, x, y, width, height); callback(canvas.toDataURL()) }; ... </code></pre>