Why drawing on canvas resizing/scaling with canvas size?

eaglehopes · July 19, 2022

My complet code is :

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Online canvas program</title>
</head>

<body>
<style type="text/css">
.GraphicArea {
	background-color: #ceccec;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
</style>



<table>

<tr>
<td>
<p id="Canvas Result"></p>
</td>
</tr>

<tr>
<td>
<form>
	<label for="canvasWidth">Canvas width :</label>
	<input type="number" id="width" name="quantity" min="300" max="1000" value="350" onchange="setCanvasWidth(this.value)"></input><br>
	
	<label for="canvasWidth">Canvas heigth :</label>
	<input type="number" id="width" name="quantity" min="300" max="1000" value="350" onchange="setCanvasHeight(this.value)"></input><br>
	<input type="submit" value="Apply" ><br>
</form>
</td>
  
<td>
<canvas class="GraphicArea" id="GraphicArea"  alt="Graphics Area for drawing cross section">
</canvas>
  

<script type="text/javascript">


var gui = document;
const canvasElement = gui.getElementById("GraphicArea");
const icerik = canvasElement.getContext("2d");
var canvasWidth=300;
var canvasHeight=300;

if (canvasElement.getContext) {
  //const ctx = canvas.getContext('2d');
  // drawing code here
  gui.getElementById("Canvas Result").innerHTML = "supported";
} else {
  // canvas-unsupported code here
  gui.getElementById("Canvas Result").innerHTML = "not supported";
}

function setCanvasWidth(w) {
canvasWidth=w;
canvasElement.style.width=canvasWidth+"px";
draw();
}

function setCanvasHeight(h) {
canvasHeight=h;
canvasElement.style.height=canvasHeight+"px";
draw();
}

function draw() {
	icerik.beginPath();
	icerik.moveTo(10,10);
	icerik.lineTo(50,50);
	icerik.stroke();
	
	icerik.closePath();

	icerik.lineWidth=3;
	var linearGradient2 = icerik.createLinearGradient(125,0, 225,0);
	linearGradient2.addColorStop(0  , 'rgb(255, 0,   0)');
	linearGradient2.addColorStop(0.5, 'rgb(  0, 0, 255)');
	linearGradient2.addColorStop(1  , 'rgb(  0, 0,   0)');

	icerik.strokeStyle = linearGradient2;
	icerik.strokeRect(125, 10, 100, 100);
	
}
</script>  
  
</td>
  
</tr>

</table>

</body>
</html>

The same code but in corrected format in my last post. The problem is that, when I resize canvas, drawing on it resizing too :

1.png.fff5f5028def8ed1bfd2defaaa32f0d0.png

When i resized canvas using input boxes, them square streches and becomes rectangle :

Why? How can I prevent it? Any help is appreciated.

requinix · July 19, 2022

The width and height of the canvas are different from the width and height of the canvas element. What you've done is resize the element, however it will remain at its default drawable dimensions of 300x150.

If you want to resize the canvas itself then you need to update its .width and .height.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas

eaglehopes · July 20, 2022

Thanks requinix, when I changed :

canvasElement.style.width=canvasWidth+"px";

with

canvasElement.width=canvasWidth;

it works as I expected.

Sign In

Why drawing on canvas resizing/scaling with canvas size?

Recommended Posts

eaglehopes

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

eaglehopes

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information