Canvas-Elemente werden nicht richtig dargestellt

Question

Ich habe die zwei Funktionen definiert, um einen Kreis und ein Dreieck zu rendern. Sehr geradliniges Zeug.

function circle(offset, size){ 
    var color = $("#color option:selected").val(); 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    radius = size * 1; 

    context.beginPath(); 
    context.arc(offset, 2, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = color; 
    context.fill(); 
} 

function triangle(offset, size){ 
    var color = $("#color option:selected").val(); 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    var width = size * 6; 
    var height = size * 5; 
    var padding = 0; 

    // Draw a path 
    context.beginPath(); 
    context.moveTo(offset + width/2, padding); 
    context.lineTo(offset + width, height + padding); 
    context.lineTo(offset, height + padding); 
    context.closePath(); 

    // Fill the path 
    context.fillStyle = color; 
    context.fill(); 
} 

Ich habe ich die Leinwand auf meiner Seite mit hinzugefügt:

<canvas id="canvas"></canvas> 

Aus irgendeinem Grund, den ich den Kreis sehen und Quadrat ein nicht richtig gemacht wird. Siehe beigefügte Screenshots.

Answer 1

Ich kann fast garantieren, dass es ist, weil Sie die Breite und Höhe des Canvas mit CSS Breite und Höhe und nicht die <canvas> HTML-Attribute setzen.

Sie müssen die Breite/Höhe entweder in dem Leinwand-Tag definieren: <canvas width="500" height="500">

oder in Code:

var canvas = document.getElementById("canvas"); 
canvas.width = 500; 
canvas.height = 500; 

Und nicht von CSS. Wenn Sie dies tun:

<canvas style="width: 500px; height: 500px;">

Dann haben Sie eine 300x150 Leinwand (die Standardgröße), die verzogen wurde skaliert/500x500 zu sein, die mit ziemlicher Sicherheit ist das, was Sie bekommen.

(Ich schrieb die oben genannten freihändig, so könnte es ein Tippfehler sein, aber Sie bekommen die Idee)