1

In this code, I have to set the width to 400px and height to 200px in order for the canvas to work. Does anyone know why this is happening? Also, in case it matters, I am on a Windows 10 Computer, but it is still coming out this way when I run the code on Stack Overflow.
With 400: 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var a = document.getElementById("3d");
var b = a.getContext("2d");
b.beginPath();
b.moveTo(0,50);
b.lineTo(0,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(0,50);
b.lineTo(50,0);
b.lineTo(100,50);
b.lineTo(100,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(100,50);
b.stroke();
});
</script>
</head>
<body>
<canvas id="3d" style="width:400px;height:200px;border:1px solid black"></canvas>
</body>
</html>
With 200: 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var a = document.getElementById("3d");
var b = a.getContext("2d");
b.beginPath();
b.moveTo(0,50);
b.lineTo(0,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(0,50);
b.lineTo(50,0);
b.lineTo(100,50);
b.lineTo(100,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(100,50);
b.stroke();
});
</script>
</head>
<body>
<canvas id="3d" style="width:200px;height:200px;border:1px solid black"></canvas>
</body>
</html>
AGMPenguin
  • 45
  • 8

3 Answers3

4

The style= defines the scaling - use width= and height= to set the size of the box.

Also explained here (MDN canvas element).

The displayed size of the canvas can be changed using CSS, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted.

It is better to specify your canvas dimensions by setting the width and height attributes directly on the elements, either directly in the HTML or by using JavaScript.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var a = document.getElementById("3d");
var b = a.getContext("2d");
b.beginPath();
b.moveTo(0,50);
b.lineTo(0,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(0,50);
b.lineTo(50,0);
b.lineTo(100,50);
b.lineTo(100,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(100,50);
b.stroke();
});
</script>
</head>
<body>
<canvas id="3d" width="200" height="200" style="border:1px solid black"></canvas>
</body>
</html>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
2

To set the width and height of a canvas element you should use the width and height attributes. The default is a width of 300px and a height of 150px. When you set both dimensions via CSS it won't override the defaults but instead scale them.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var a = document.getElementById("3d");
var b = a.getContext("2d");
b.beginPath();
b.moveTo(0,50);
b.lineTo(0,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(0,50);
b.lineTo(50,0);
b.lineTo(100,50);
b.lineTo(100,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(100,50);
b.stroke();
});
</script>
</head>
<body>
<canvas id="3d" width="200" height="200" style="border:1px solid black"></canvas>
</body>
</html>
igorshmigor
  • 792
  • 4
  • 10
0

I think you should be looking into this answer.

JQuery doesn't like it when CSS rules are cast upon it

This is why setting the properties beforehand and not imposing them in CSS does the trick you're looking to achieve.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var a = document.getElementById("3d");
a.width = 200;
a.height = 200;
a.innerWidth = 200;
a.innerHeight = 200;
var b = a.getContext("2d");
b.beginPath();
b.moveTo(0,50);
b.lineTo(0,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(0,50);
b.lineTo(50,0);
b.lineTo(100,50);
b.lineTo(100,100);
b.lineTo(50,150);
b.lineTo(50,100);
b.lineTo(100,50);
b.stroke();
});
</script>
</head>
<body>
<canvas id="3d" style="border:1px solid black"></canvas>
</body>
</html>
WildWilyWilly
  • 121
  • 11