0

I have a simple javascript code below to try out my canvas tag :

javascript

window.addEventListener('load', function() {
    var myCanvas = document.getElementById("canvas");
    var ctx = myCanvas.getContext("2d");
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, 100, 100);
})

however I get different result of above javascript code whenever I style my canvas tag like below:

<body>
    <canvas id="canvas" width="300" height="300" style="border:1px solid black" ></canvas>
</body>

or

#canvas{
    width: 300px;
    height: 300px;
    border: 2px solid black;
}

enter image description here

enter image description here

why is this happening? or am i missing some concept of the canvas tag?

aminbasiran
  • 27
  • 5
  • 1
    Don't use CSS height/width on the canvas, it stretches the pixels. That said, when w/h are the same in HTML and CSS you should be OK, so I don't see that the code here reproduces the image on FF 105. – ggorlen Sep 28 '22 at 02:42

0 Answers0