Холст не может нарисовать квадрат?

Question

    <canvas id="c" style="border: solid 1px black; width: 300px; height: 300px;"></canvas> 
    <script type="text/javascript">
        var canvas = document.getElementById("c"),
        ctx = canvas.getContext("2d");
        ctx.fillRect(0, 0, 50, 50);
    </script>  

Результат в:

скрипка: http://jsfiddle.net/wong2/xZGUj/

Answer 1

Проблема в атрибуте стиля холста.

Установка размера холста с помощью атрибута стиля приведет к проблемам с масштабированием.Это происходит потому, что элемент canvas имеет размер по умолчанию.Если вы устанавливаете размер с помощью css, он отличается от этого размера => проблемы с масштабированием.Вы можете предупредить (canvas.height), и вы увидите, что оно имеет значение, даже если вы его не устанавливаете.

Если вы измените следующее, оно будет работать:

<canvas id="c" width="100" height="100" style="border: solid 1px black;"></canvas> 
<script type="text/javascript">
    var canvas = document.getElementById("c"),
    ctx = canvas.getContext("2d");
    ctx.fillRect(0, 0, 50, 50);
</script>  

Answer 2

это может быть, вы должны указать ширину и высоту в качестве атрибутов холста. Проверьте это http://jsfiddle.net/Fedor/xZGUj/3/

Я полагаю, атрибуты ширины и высоты инициализируют систему координат холста понимания.Свойства CSS ограничивают только размер вашего холста.Поэтому, если вы не укажете width и heihgt, вы получите систему координат по ширине = 300 и высоте = 150.Вы можете найти эту информацию здесь http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width

Так что если вы в своей скрипке поставите высоту в css 150 ... squre будет squre:)