Change the aspect ratio for canvas with set number of pixels-CodePudding

I have an image (well data) that is m = 3600 n = 512. It has to stay like this. The data really starts as an array but is then broken down into m,n chunks. I would like to change the aspect ratio in canvas. If I change canvas.width, it gives me more available space that I don't use. If I change canvas.style.width, it increases both height and width.

I want the image to be wider while keeping its same length.

<!doctype html>
<html  lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <!-- Font Awesome -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.css"
      rel="stylesheet"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      rel="stylesheet"
    />
    <!-- MDB -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css"
      rel="stylesheet"
    />
    <!-- MDB -->
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.js"
    ></script>     
<style>
body {
  max-width: 910px; 
  margin: 0 auto; 
  background-color:#FFFFFF;
  text-align:center;
}
</style>    
</head>
<body>
    <label  for="customRange1">X frequency</label>
    <div >
      <input type="range"  id="customRange1" />
    </div>
    <label  for="customRange2">Y frequency</label>
    <div >
      <input type="range"  id="customRange2" />
    </div>
    <canvas style="outline: black 2px solid;" id="leftcanvas"  ></canvas>
<script>

function pixel(array){
    var inc = 0;
    var buffer = new Uint8ClampedArray(width * height * 4); // have enough bytes
    for(var y = 0; y < height; y  ) {
        for(var x = 0; x < width; x  ) {
            var pos = (y * width   x) * 4; // position in buffer based on x and y     
            buffer[pos  ] = 0;           // some R value [0, 255]
            buffer[pos 1] = 0;           // some G value
            buffer[pos 2] = 0;           // some B value
            buffer[pos 3] = array[inc];           // set alpha channel
            inc  
        }
    }
    return buffer;
};
function makecanvas(idtag,height,imgdata){
    var canvas = document.getElementById(idtag),
        ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false;
        canvas.height = height;  
        canvas.width = width;      
        
        /* THIS PART I CANT FIGURE OUT */

        /* increases canvas but not image */
        canvas.width = width*1.25;
        
        

        
        /* increases width and length */
        //canvas.style.width = 1.25* Math.round(512)   "px";
        
        
        var idata = ctx.createImageData(width, height);
        idata.data.set(imgdata);
        ctx.putImageData(idata, 0, 0);
        return [idata,ctx];   
};
function freq(hzx,hzy){
    data = [];
    for (var y = 0; y < 3600; y = 1){
        for (var x = 0; x < 512; x = 1){
        data.push(Math.round((255/4*(Math.sin(hzy*2*Math.PI*y/3600)   Math.sin(hzx*2*Math.PI*x/511) 2))))
        }
    }
    return data;
}
trace = freq(1,1)
var width = 512,
    height = trace.length/512; 
imgmatrix = pixel(trace); 
CI = makecanvas("leftcanvas",height,imgmatrix);
var idata = CI[0];
const ictx = CI[1];
var slideX = document.getElementById('customRange1');
var slideY = document.getElementById('customRange2');
slideX.onchange = function() {
    hzx = slideX.value;
    hzy = slideY.value;
    trace = freq(hzx,hzy)
    imgmatrix = pixel(trace);  
    idata.data.set(imgmatrix);
    ictx.putImageData(idata, 0, 0);    
}
slideY.onchange = function() {
    hzx = slideX.value;
    hzy = slideY.value;
    trace = freq(hzx,hzy)
    imgmatrix = pixel(trace);  
    idata.data.set(imgmatrix);
    ictx.putImageData(idata, 0, 0);    
}
</script>


</body>
</html>

CodePudding user response：

I'm almost afraid to answer - but what about the most obvious solution: Instead of just changing the width of the canvas via CSS - change both width & height.

canvas.style.width = 1.2 * Math.round(512)   "px";
canvas.style.height = "3600px";