Jump to content

Why drawing on canvas resizing/scaling with canvas size?

eaglehopes

By eaglehopes
in HTML Help

 Share
Go to solution Solved by requinix,

Recommended Posts

eaglehopes Advanced Member

eaglehopes

Posted
Posted

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 :

2.thumb.png.d7e964e37619e6ed6d2f75ac24eeafc0.png

 

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

  • Solution
requinix Prolific Member

requinix

Posted
  • Solution
Posted

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

  • Great Answer 1
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.