<style>
canvas {
border: 1px solid #000;
}
</style>
<canvas id="myCanvas" width="400" height="400"></canvas>
<button id="resizeButton">resize button</button>
<script>
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext("2d")
function update() {
ctx.fillStyle = "#FF0000"
ctx.fillRect(0, 0, 150, 75)
}
document.getElementById('resizeButton').addEventListener('click', () => {
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
canvas.width = 600;
ctx.putImageData(imageData, 0, 0);
})
update()
</script>