Canvas geeft 1/3de afbeelding weer

[renevanh]

Ik zit wat te knoeien met een canvas maar loop tegen raar gedrag aan waar ik geen verklaring voor kan vinden.
Het uiteindelijke doel is de afbeelding 180 graden draaien, maar dat is de volgende stap.
Ik heb een .png afbeelding van 344x176 px. In eerste instantie wil ik deze tekenen in mijn canvas, dat zou niet al te moeilijk moeten zijn.

Dus stukje HTML:

HTML:

<canvas id="MenuArrow" width="344px" height="176px"> 
</canvas>

En stukje Javascript:

JavaScript:

<script type="text/javascript">
var surface;
var arrow;

function drawCanvas() {
  surface = document.getElementById("MenuArrow");
  var surfaceContext = surface.getContext('2d');
  
  if (surface.getContext) {
    arrow = new Image();
    arrow.src = "Images/WoodArrow.png";
    arrow.addEventListener("load", function() {
      surfaceContext.drawImage(arrow, 0, 0, 344, 176);
    }, false);
  }
}
</script>

Om een of andere reden (zoals te zien op http://djoi.awardspace.com/djoi2/DJOI3/) wordt slechts 1/3de van de afbeelding getekend en opgeschaald om de ruimte van 344x176 te vullen. Niet helemaal de bedoeling.

Nu kan ik helemaal niet vinden waarom dat het geval is. Niet compleet laden uitgesloten met de EventListener, in de drawImage() zelfs de afmeting toegevoegd maar geen verschil.

Dus ja... eh... help?

[crisp]

Dat komt gewoon door de breedte en overflow:hidden op #menu

[renevanh]

Lijkt er inderdaad iets mee te maken te hebben, maar toch niet alles.
Als ik beide verwijderd is de pijl wel geheel zichtbaar, maar 3x zo groot als .png zelf is.
Alleen de overflow: hidden verwijderen doet het hele canvas onder de div menu verdwijnen, alleen de width verwijderen geeft hetzelfde resultaat als nu.

In theorie zijn de width en overflow: hidden toch alleen van toepassing op de div zelf? De inhoud moet daar toch geen direct gevolg van ondervinden, laat staan onlogisch gaan schalen?

De pijlen onder het canvas zijn gewoon <img> tags met de pijl op ware grootte, waarom wordt die 3x zo groot als ik hem in een canvas 'plak'?

[crisp]

Hij wordt helemaal niet 3x zo groot; hij is gewoon 344x176 pixels. Je andere pijlen worden kleiner geschaald door de width=100% waardoor deze de beschikbare breedte innemen - door het gebruik van percentages op je container is dat afhankelijk van de viewport en wel 10% daarvan.

[renevanh]

Ah kijk... daarom is de kijk van iemand anders nou fijn... haha.

Dank!