HTML5 Canvas grootte

    Beste ICT'ers,


    Ik ben al een tijdje bezig met canvas en alles daaromheen. Nu kwam ik vanmiddag voor het probleem te staan dat alles wat ik op mijn canvas teken dubbel zo hoog als breed is. De reden daarvoor lijkt het toekennen van hoogte en breedte aan de canvas. Voorheen deed ik dit via de HTML tag, maar om alle opties in variabelen te zetten had ik het op de volgende manier gedaan:


    Code
    var canvasWidth = "500px"; //Canvas width in pixels
var canvasHeight = "500px"; //Canvas height in pixels
$('#canvas').css({"width": canvasWidth, "height": canvasHeight, "border": "1px solid black"});


    Nu word dat juist toegepast, maar zodra ik een object ga tekenen:


    Code
    var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillRect(0,0,100,100);


    is dat object dubbel zo hoog als breed en lijkt deze wat onscherp te zijn.
    Iemand hier een verklaring/oplossing voor?

    Normaal gezien gebruik je de width en height attributen bij de <canvas> element.
    Daarmee geef je de afmetingen aan.
    Als je dit met css doet, maak je een soort van zoomlevel ervan. Als de css afmetingen hoger zijn dan de attribute afmetingen dan zal het kleiner lijken op de canvas. Zijn de css afmetingen kleiner dan lijkt het veel groter op de canvas.
    Dus tip! Gebruik altijd de height en width attributen om de afmetingen neer te zetten, en geen css.
    code:

    Code
    var canvasWidth = "500px"; //Canvas width in pixels
var canvasHeight = "500px"; //Canvas height in pixels
$('#canvas').attr("width",canvasWidth).attr("height",canvasHeight);

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!

Maak een account aan Login