Элементы холста не отображаются должным образом

Question

Я определил две функции для визуализации круга и треугольника. Очень прямо вперед.

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(); 
} 

Я добавил холст на мою страницу с:

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

По некоторым причинам я могу увидеть круг и угольник не делает правильно. См. Прилагаемые скриншоты.

Answer 1

я могу почти гарантировать, что это происходит потому, что вы устанавливаете ширину и высоту холста, используя ширину и высоту CSS, а не HTML атрибуты <canvas>.

Вы должны определить ширину/высоту или в холст тега: <canvas width="500" height="500">

или в коде:

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

И не CSS. Если вы сделали это:

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

Тогда вы бы 300x150 холст (размер по умолчанию), который был масштабируется/Warped быть 500x500, что почти наверняка, что вы получаете.

(я писал выше от руки, так что может быть опечатка, но вы получите идею)