Рисование в позиции курсора на холсте с помощью JavaScript

Question

Я пытаюсь рисовать поверх холста, нажимая и перетаскивая мышь. Моя проблема заключается в том, что, кроме того, что линия имеет очень низкое качество (я хочу более выраженную границу), она только уважает положение мыши, когда она равна 0,0. Когда я перемещаю мышь в нижний угол, линия увеличивает его расстояние от него так же, как когда я нахожусь в середине холста, линия уже вышла из него. У меня есть код на: http://jsfiddle.net/ajTkP/12/

Я также разместить его здесь:

var MDown = false; 
var Color = 'blue'; 

var Canvas = document.getElementById('canvas'); 
var Context = Canvas.getContext('2d'); 

Canvas.onselectstart = function() { return false; }; 
Canvas.unselectable = "on"; 
Canvas.style.MozUserSelect = "none"; 

Canvas.onmousedown = function(e) { 
    MDown = true; 
    Context.strokeStyle = Color; 
    Context.lineWidth = 3; 
    Context.lineCap = 'round'; 
    Context.beginPath(); 
    Context.moveTo(e.pageX - Position(Canvas).left, e.pageY - 5); 
} 

Canvas.onmouseup = function() { MDown = false; }; 

Canvas.onmousemove = function(e) { 
    if (MDown) { 
     Context.lineTo(e.pageX - Position(Canvas).left, e.pageY - 5); 
     Context.stroke(); 
    } 
} 

function Position(el) { 
    var position = {left: 0, top: 0}; 
    if (el) { 
     if (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
      position.left += el.offsetLeft; 
      position.top += el.offsetTop; 
     } 
    } 
    return position; 
} 

Спасибо за вашу помощь!

Answer 1

Вам необходимо установить явные width и height на холсте. По умолчанию размеры холста имеют ширину 300 и высоту 150 (see the spec here). Установив ширину и высоту с помощью CSS, вы просто растягиваете холст.

Либо сделать:

<canvas id="canvas" width="300" height="200"></canvas> 

или установить ширину/высоту с помощью JavaScript:

canvas.width = 300; 
canvas.height = 200; 

Посмотреть обновленный jsfiddle: http://jsfiddle.net/ajTkP/13/

Answer 2

Похоже jimr бил меня на удар о высота и ширина холста.

Плохое качество линии, хотя связано с тем, как вы рисуете линию. Вы заметите, что вы звоните stroke() по телефону каждые событие onmousemove. Имейте в виду, что он отслеживает путь линии, начиная с beginPath() до closePath(), поэтому вы в основном поглаживаете одну и ту же строку несколько раз (каждый раз, когда движется ваша мышь). Это то, что дает вам псевдонимы (блочно выглядящие) линии, а не гладкие сглаженные линии, которые вы ожидаете.