Pixel not the right size on canvas

Question

So my rectangle i want to draw on a canvas are, i think scaled to the size of the canvas. I i want them to be 8x8 they dont come out as 8x8.

Here's my code:

function draw() {
  var canvas = document.getElementById('karte');
  var ctx = canvas.getContext("2d");

  Stuttgart = ctx.fillRect(10,10,8,8);
}

.map {
 height: 799px;
 width: 591px;
 margin: auto;
 margin-top: 50px;
 background-image: url('../img/Karte_Deutschland.svg');
 background-repeat: no-repeat;
 background-size: contain;
 background-position: center;

}

.map canvas {
  height: 799px;
  width: 591px;
}

<canvas id="karte">
</canvas>

Here's a screenshot how it looks like in the end: https://prnt.sc/r58bvl

score 3 · Accepted Answer · answered Feb 20 '20 at 16:52

For now you set the canvas width and height on the screen different then the canvas actual width and height (which is 300/150 by default) it is why anything scaled for you. so :

Eather add the height and width to the canvas:

<canvas id="karte" height="799" width="591"><canvas>

Or add it manually in the js:

 canvas.width = canvas.offsetWidth;
 canvas.height = canvas.offsetHeight

Pixel not the right size on canvas

1 Answers1