canvas drawImage() - cut image in half and take left part

Question

Image used: https://i.sstatic.net/03HXV.jpg

Code:

var canvas = document.createElement('canvas');  
var ctx = canvas.getContext('2d');
ctx.drawImage(media, canvas.width / 2, 0, canvas.width, canvas.height);

The result: https://i.sstatic.net/xplPM.jpg

Is there a way to only get the left image and center it?

Answer 1

You should use the optional parameters of drawImage, by doing it this way your canvas can be at any size, so it should be:

context.drawImage( media, 0, 0, media.width / 2, media.height, 0, 0, canvas.width, canvas.height);

var my_canvas = document.getElementById('canvas'),
    context = my_canvas.getContext("2d");
    
let media = new Image();
media.src = 'https://i.imgur.com/5KYZ1M2.jpg';
media.onload = function() { 
  context.drawImage( media, 0, 0, media.width / 2, media.height, 0, 0, canvas.width, canvas.height);
}

canvas {
    border: 1px dotted black;
    width: 200px;
    height: 200px;
}

<canvas id="canvas" width="200" height="200">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

You can read more information about drawImagehere