crop an image using canvas - result is small image

Question

I'm trying to crop an image using canvas.
Original image is 2217 x 790.
Loading on page it is scaled to 1515 x 540
Canvas is 960 x 540.
Both image and canvas are on center of screen, so aligned horizontally.
I need to crop central area - 960 x 540.

var img = document.getElementById("imgt");
var canvas = document.getElementById("canvasa");
var ctx = canvas.getContext("2d");

var a = $('#imgt').width() - 960;
var a = a/2; // this is 277.7...

ctx.drawImage(img, a, 0, 960, 540, 0, 0, 960, 540);
//also tried:
ctx.drawImage(img, 0, 0, 960, 540, 0, 0, 960, 540);

var newimg = new Image();
newimg.src = canvas.toDataURL('image/jpeg');

var dl = document.createElement("a");
dl.href = canvas.toDataURL("image/jpeg");
dl.download = true;
document.body.appendChild(dl);
dl.click();

Downloading newimg what I see - it is 300 x 150 !

Answer 1

See my comment for differences between width attribute and width as style. They are not exactly the same. Besides, I just made a fiddle since you didn't and I don't get the same behavior! The downloaded image is 960 * 540

HERE - fires with delay

ONLOAD

setTimeout(function(){
  var canvas = document.createElement("canvas");
  canvas.width = "960";
  canvas.height="540";
  var ctx = canvas.getContext("2d");
  ctx.drawImage(document.images[0], 0, 0, 960, 540, 0, 0, 960, 540);
  var a = document.createElement("a");
  a.download = "image.jpeg";
  a.href = canvas.toDataURL("image/jpeg");
  a.click();
},5000);

Answer 2

In general, if you want to crop an area from a source image, and draw it into a canvas without breaking the aspect ratio and not hardcoding the dimensions into the routine, you can do this:

const canvasAspectRatio = canvas.width / canvas.height;

const cropWidth = canvas.width;
const cropHeight = cropWidth / canvasAspectRatio;
const sx = img.width / 2 - cropWidth / 2;
const sy = img.height / 2 - cropHeight / 2;

ctx.drawImage(img, sx, sy, cropWidth, cropHeight, 0, 0, canvas.width, canvas.height);

 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const img = document.getElementById('img'); const canvasAspectRatio = canvas.width / canvas.height; // Crop central canvas sized rectangle area into canvas const cropWidth = canvas.width; const cropHeight = cropWidth / canvasAspectRatio; // Here you should calculate the height based on aspect ratio instead of assuming it matches that of the canvas const sx = img.width / 2 - cropWidth / 2; const sy = img.height / 2 - cropHeight / 2; ctx.drawImage(img, sx, sy, cropWidth, cropHeight, 0, 0, canvas.width, canvas.height); 

 body { background-color: black; } #img { visibility: hidden; } #canvas { border: 1px solid #f00; } 

 <canvas id="canvas" width="960" height="540"></canvas> <img id="img" src="http://via.placeholder.com/2217x790">