SOURCE

const c = document.querySelector('canvas');

// getContext
const ctx = c.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'blue';
ctx.fillRect(40, 40, 50, 50);

// toDataURL
const url = c.toDataURL();
document.querySelector('p').innerText = url;
document.querySelector('img').src = url;

// toBlob 
c.toBlob((b) => {
  console.log(`Blob size: ${b.size}`);
});

<canvas id="canvasEl"></canvas>
<p></p>
<img>

p {
  word-wrap:break-word;
  font-size: 12px;
  color: #666;
}