Атрибут width тега <canvas> — ширина полотна в пікселях

HTML

<canvas id="myCanvas" width="200" height="100"></canvas>

CSS

canvas {
    border: 1px solid #0172ad;
}

JS

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#0172ad';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#fff';
ctx.font = '16px sans-serif';
ctx.fillText(canvas.width + '×' + canvas.height, 70, 55);

HTML

<p class="head">1. Без атрибутів — типові 300×150</p>
<canvas></canvas>

<p class="head">2. width="200" height="80" — растр і коробка збігаються</p>
<canvas width="200" height="80"></canvas>

<p class="head">3. Пастка: у стилях задано лише ширину</p>
<canvas class="stretch" width="60" height="30"></canvas>
<p class="note">Растр 60×30, правило width: 240px — і висота теж вискочила до 120px,
    бо в полотна є власне співвідношення сторін.</p>

<p class="head">4. width="0" — полотно є, а показувати нічого</p>
<p class="marks">[<canvas width="0" height="60"></canvas>]</p>

<p class="head">5. Те, що зазвичай і потрібно</p>
<p class="note">Гумова коробка: ширина 100% і aspect-ratio 3 / 1. Растр при цьому лишається
    300×150, тож справжній скрипт мусив би перерахувати його сам.</p>
<canvas class="fluid"></canvas>

CSS

p {
    margin: 16px 0 6px;
    max-width: 560px;
}

.head {
    margin: 22px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

canvas {
    display: inline-block;
    background: #eef3fb;
    outline: 2px dashed #d64545;
    outline-offset: 2px;
}

.stretch {
    width: 240px;
}

.fluid {
    display: block;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 3 / 1;
}

.note {
    color: #5a6472;
    font-size: .9em;
}

.marks {
    display: inline-block;
    padding: 8px 10px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
    font-family: ui-monospace, monospace;
}