• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] mt JS geladenes Bild ist verzerrt

I

Iago

New member
Hallo, mit folgendem Code erstelle ich 2 Bilder, eines rein mit HTML, das zweite
dann mit JS im Canvas-Bereich. Warum ist das mit JS bearbeitete Bild nur teilweise und
vergrößert zu sehen? Ich gebe ja stets width und height an. (könnte ich auch noch bei drawImage, ändert aber nichts) Vielen Dank!

sternenhimmel.jpg

Browser: Firefox 48.0/Internet Explorer11
Code:
HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>

 	<script>
	
	function drawCanvas()
{
  var element = document.getElementById('canvas');
   var img = new Image();
 
   img.onload = function() {
  if(element.getContext)
  {
    var context = element.getContext('2d');          
	
   context.drawImage(img,0,0);
   
  }
   }
   img.src = "background.jpg";
}

          </script>
	</head>
	 <body>
  
  <img id="stars" width="500" height="500" src="background.jpg" alt="background">
	<canvas id="canvas" style="width: 500px; height: 500px; background-color: white;">
	
	</canvas>
	<script> drawCanvas() </script>
  </body>
</html>

- - - Aktualisiert - - -

Ahh sorry, das canvas-Tag muss so aussehen:
HTML: 
<canvas id="canvas" width="500" height="500"></canvas>
Die Angaben nicht in CSS!
 
Zuletzt bearbeitet von einem Moderator:
Also ein <canvas> wird mit der Standardgröße 300x150 erzeugt, wenn du nicht die HTML-Attribute width/height verwendest. Das wird auch nicht dadurch geändert, dass du per CSS die Darstellungsgröße verändert (ist genauso wie wenn du bei einem <img>-Tag per CSS die Größe änderst. Das Bild wird dadurch auch nicht geändert, sonder nur auf die gewünschte Größe gestreckt/gestaucht).

Hier ein bisschen Code, um das Ganze etwas zu veranschaulichen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
canvas {
	border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="initial"></canvas><br>
<canvas id="css-changed" style="width: 500px; height: 500px"></canvas><br>
<canvas id="html-changed" width="500px" height="500px"></canvas>
<script type="text/javascript">
alert(Array.from(document.getElementsByTagName("canvas")).map(function(c){
	return c.id + ":" +
		"\n\tcanvas size: " + c.width + "x" + c.height + 
		"\n\tdisplay size: " + c.clientWidth + "x" + c.clientHeight;
}).join("\n"));</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben