Рисование

Пример на JSFiddle

Шаг 1: Первые шаги

Сначала надо добавить тег <canvas>, в котором будет происходить рисование.

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

И выбрать его в JavaScript.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

Шаг 2: События мыши

Надо добавить события для мыши.

// кнопка мыши нажата
canvas.onmousedown = function(e) {}

// мышь находится в движении
canvas.onmousemove = function(e) {}

// кнопка мыши отпущена
canvas.onmouseup = function(e) {}

Шаг 3: Позиция курсора мыши

Узнать позицию курсора мыши над тегом <canvas> можно через метод getBoundingClientRect().

Созданную функцию в коде ниже надо выполнять в событиях onmousemove, onmousedown и onmouseup.

var canvasOffset = canvas.getBoundingClientRect();

// функция для координаты курсора мыши над <canvas>
function getMousePosition(mouseEvent) {
    return [
        Math.floor(mouseEvent.pageX - canvasOffset.left), 
        Math.floor(mouseEvent.pageY - canvasOffset.top)
    ];
}

Шаг 4: Рисование

Известна текущая позиция курсора мыши над <canvas>. Теперь в этой позиции надо добавить объект.

var drawing = false;

// кнопка мыши нажата
canvas.onmousedown = function(e) {
    drawing = true;
    ctx.beginPath();
}

// мышь находится в движении
canvas.onmousemove = function(e) {
    if (drawing) {
        var mousePosition = getMousePosition(e);

        ctx.lineTo(mousePosition[0], mousePosition[1]);
        ctx.stroke();
    }
}

// кнопка мыши отпущена
canvas.onmouseup = function(e) {
    drawing = false;
    ctx.closePath();
}

Идёт рисование через метод lineTo(), чтобы рисунок не обрывался при перемещении мыши.

Переменная drawing позволяет прекратить рисование при отпускании кнопки мыши.

Также можно указать ширину линии, и сделать её края закруглёнными.

ctx.lineWidth = 10;
ctx.lineJoin = "round";

Полный код:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext("2d"),
    drawing = false;

canvasOffset = canvas.getBoundingClientRect();
ctx.lineWidth = 10;
ctx.lineJoin = "round";

canvas.onmousedown = function(e) {
    drawing = true;
    ctx.beginPath();
}

canvas.onmousemove = function(e) {
    if (drawing) {
        var mousePosition = getMousePosition(e);
        ctx.lineTo(mousePosition[0], mousePosition[1]);
        ctx.stroke();
    }
};

canvas.onmouseup = function(e) {
    drawing = false;
    ctx.closePath();
}

function getMousePosition(mouseEvent) {
    return [Math.floor(mouseEvent.pageX - canvasOffset.left), Math.floor(mouseEvent.pageY - canvasOffset.top)];
}