How To Maintain Aspect Ratio Of An Image Within A Canvas Object

Quick question regarding aspect ratios that are driving me a bit nuts. My canvas element has fixed dimensions of 250x250 (1:1 ratio). The image that I'm drawing into the canvas how

Solution 1:

Your code samples w*h region, which is not square, into _config.canvasWidth*_config.canvasHeight region, which is square. Following change seems to fix your example for me:

// old code
_cache.ctx.drawImage(_cache.canvas, 0, 0, w, h, 0, 0, _config.canvasWidth, _config.canvasHeight);
// new code
_cache.ctx.drawImage(_cache.canvas, 0, 0, w, h, 0, 0, _config.newImgWidth, _config.newImgHeight);