How to fit n pixels to canvas in JavaScript?

Question

I am creating a window display in a canvas. First I made an example JSONto test but my code does not work. I want it to display like this (ignore the black lines):

But it displays like this:

(If images are too big I can resize them)

My code:

<!DOCTPYE html>
<html>

<head>
  <title>Özel OS</title>
  <style>
    canvas {
      height: 450px;
      width: 800px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <h1>Monitör:</h1>
  <canvas id="monitor">Tarayıcınız HTML Canvas özelliğini desteklemiyor.</canvas>
  <script>
    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 < rows; y++) {
      for (let x = 0; x < 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);

      }
    }
  </script>
</body>

</html>

Your canvas (drawing surface) is still just 300x150px. So only the first rectangle is in the visible area. You want to set its `width` and `height` attributes: https://jsfiddle.net/756ekLz3/ — Kaiido, Dec 08 '19 at 14:03
Thanks, I thought CSS for setting width and height is enough but I learned it is not. I am not good at JS and this is my first time using `canvas`. — bapap, Dec 08 '19 at 15:05

How to fit n pixels to canvas in JavaScript?

0 Answers0