<canvas></canvas>
<label for="ex1">300x150</label><input type="radio" name="ex1">
<label name="ex2">600x300</label><input type="radio" name="ex2">

<p><strong>Explination:</strong> The square is drawn on the canvas, where the default width and height of its <i>content</i> is 300x150.</p>

html,
body {
  text-align: center;
}

canvas {
  border: solid;
  margin: auto;
  display: block;
  width: 90%;
}

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

function square() {
  ctx.rect(100, 25, 100, 100);
  ctx.lineWidth = 5;
  ctx.stroke();
  ctx.fillStyle = "teal";
  ctx.fill();
}

square();

const inp1 = document.getElementsByTagName("input")[0],
  inp2 = document.getElementsByTagName("input")[1],
  p = document.querySelector("p");

inp1.checked = true;
inp1.addEventListener("click", () => {
  inp2.checked = false;
  canvas.width = 300;
  canvas.height = 150;
  square();

  p.innerHTML = `
  <strong>Explination:</strong> The square is drawn on the canvas, where the default width and height of its <i>content</i> is 300x150.`;
});

inp2.addEventListener("click", () => {
  inp1.checked = false;
  canvas.width = 600;
  canvas.height = 300;
  square();

  p.innerHTML = `
  <strong>Explination:</strong> The square is drawn onto the canvas, where the width and height of its <i>content</i> has been changed to 600x300. The square visibly shrinks, now that the content of the canvas has to fit more units than the actual width and height of the canvas.
  `;
});