Simulation Background-Size: Cover in Canvas

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

// only load the image once
const img = new Promise(r => {
  const img = new Image();

  img.src = 'https://source.unsplash.com/WLUHO9A_xik/1600x900';
  img.onload = () => r(img);
});

const draw = async () => {
  // resize the canvas to match it's visible size
  canvas.width  = canvas.clientWidth;
  canvas.height = canvas.clientHeight;

  const loaded = await img;
  const iw     = loaded.width;
  const ih     = loaded.height;
  const cw     = canvas.width;
  const ch     = canvas.height;
  const f      = Math.max(cw/iw, ch/ih);

  ctx.setTransform(
    /*     scale x */ f,
    /*      skew x */ 0,
    /*      skew y */ 0,
    /*     scale y */ f,
    /* translate x */ (cw - f * iw) / 2,
    /* translate y */ (ch - f * ih) / 2,
  );

  ctx.drawImage(loaded, 0, 0);
};

window.addEventListener('load', draw);
window.addEventListener('resize', draw);

.--dimensions {
    width: 90%;
    height: 300px;
}

.--border {
    border: 3px solid #333;
}

canvas {
    display: block;
    margin: 0 auto;
}

#test {
    background: url(https://source.unsplash.com/WLUHO9A_xik/1600x900) no-repeat center center;
    background-size: cover;
    margin: 1rem auto 0;
}

<canvas id="canvas" class="--dimensions --border"></canvas>
<div id="test" class="--dimensions --border"></div>

Getting ugly image while simulating cover in canvas

To accomplish this you could use several techniques like HTML/CSS, CSS Only, Jquery or JS/Canvas. For more on this look here.

You do not have to set the width and height of your canvas in HTML like David Skx mentioned. You do have to erase your CSS, remove it completely.

In your JS you should set your canvas size (just define it in 1 place, don't let different languages interfere):

var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight;

Window means the whole browser, Use pixels here if you want to limit it to just a canvas and not the whole background

That's all.

Scaling an image to fit on canvas

Provide the source image (img) size as the first rectangle:

ctx.drawImage(img, 0, 0, img.width,    img.height,     // source rectangle
                   0, 0, canvas.width, canvas.height); // destination rectangle

The second rectangle will be the destination size (what source rectangle will be scaled to).

Update 2016/6: For aspect ratio and positioning (ala CSS' "cover" method), check out:

Simulation background-size: cover in canvas

Make canvas stretch to fit image

In order to get dynamically your canvas dimensions you could have the following componentWillReceiveProps() method:

componentWillReceiveProps(nextProps) {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.onload = function () {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
    img.src = URL.createObjectURL(nextProps.image)
}

How to crop images when placing them on an HTML5 canvas?

Your nested for loops execute img.onload and img.src = 'https://source.unsplash.com/random'; 25 times.

let ii = 0;
for (let xCell = 0; xCell < 5; xCell++) {
  for (let yCell = 0; yCell < 5; yCell++) {
    console.log(++ii + ": ", xCell, yCell);
  }
}

var canvas = document.getElementById('my_canvas');  var ctx = canvas.getContext('2d');  var imageObj = new Image();  ctx.canvas.width = window.innerWidth;  ctx.canvas.height = window.innerHeight;  imageObj.onload = function() {    ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);  };  imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';

<canvas id="my_canvas" style="border:2px solid;"></canvas>

div{
   width: 100%;
   height: 200px;
   position: relative;
   overflow: hidden;
}
img {
   display: block;
   width: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
}