настройка canvas в html5

В общем-то вопрос в следующем - рисую линии или прямоугольники на канве, например

var canvas = document.getElementById('main_canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.closePath()
}

Здесь задается нарисовать линию 0,0,100,100, но линия рисуется явно не по заданным координатам(намного больше) и выглядит толсто и уродливо, как будто увеличена во много раз. Тоже самое с прямоугольниками.
В Мозилле последней и Хроме такое происходит

Что делать?

Примечание:
как оказалось, это из-за
canvas#main_canvas {
width: 100%;
height: 100%;
}

Странно, и как мне растянуть канву на всю страницу?

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.