title: How to fit n pixels to canvas in JavaScript?
body: <p>I am creating a <code>window</code> display in a <code>canvas</code>. First I made an example <code>JSON</code>to test but my code does not work. I want it to display like this (ignore the black lines):
  <a href="https://www.imageupload.net/upload-image/2019/12/08/examplewindow.png" rel="nofollow noreferrer"><img src="https://www.imageupload.net/upload-image/2019/12/08/examplewindow.png" alt="Example Window"></a></p>
  
  <p>But it displays like this:
  <a href="https://www.imageupload.net/upload-image/2019/12/08/screenshotwindow.png" rel="nofollow noreferrer"><img src="https://www.imageupload.net/upload-image/2019/12/08/screenshotwindow.png" alt="Screenshot Window"></a></p>
  
  <p>(If images are too big I can resize them)</p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTPYE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Özel OS&lt;/title&gt;
    &lt;style&gt;
      canvas {
        height: 450px;
        width: 800px;
        border: 1px solid blue;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h1&gt;Monitör:&lt;/h1&gt;
    &lt;canvas id="monitor"&gt;Tarayıcınız HTML Canvas özelliğini desteklemiyor.&lt;/canvas&gt;
    &lt;script&gt;
      const ch = 450;
      const cw = 800;
      var c = document.getElementById('monitor');
      var ctx = c.getContext('2d');
  
      const pixels = [
        [
          [100, 150, 50],
          [10, 60, 210]
        ],
        [
          [150, 100, 10],
          [60, 210, 10]
        ]
      ];
  
      const rows = pixels.length;
      const columns = pixels[0].length;
  
      const sr = ch / rows;
      const sc = cw / columns;
  
      console.log(sc);
  
      for (let y = 0; y &lt; rows; y++) {
        for (let x = 0; x &lt; columns; x++) {
          let colors = pixels[y][x];
  
          console.log(colors);
  
          console.log(x * sc, y * sr);
  
          ctx.fillStyle = "rgba(" + colors[0] + "," + colors[1] + "," + colors[2] + ",255)";
          ctx.fillRect(x * sc, y * sr, sc, sr);
  
        }
      }
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>