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

Вместо этого вы можете использовать два элемента холста:

• Поместите два элемента холста друг над другом
• Нарисуйте изображение, которое вы хотите наложить на верхний холст
• Добавьте прослушиватель событий мыши на верхний холст.
• При рисовании считывайте позиции с верхнего холста, но рисуйте линии на нижнем, используя контекст нижнего холста.

(ссылки предназначены только для примера)

Примером этого может быть включение простой базовой функции рисования:

Онлайн-демонстрация

HTML:

<div id="cont">
    <canvas id="canvasBottom" width=400 height=400></canvas>
    <canvas id="canvasTop" width=400 height=400></canvas>
</div>

CSS:

#cont {
    position:relative;
    border:1px solid #777;
    height:400px;
    }
#cont > canvas {
    position:absolute;
    left:0;
    top:0;
    cursor:crosshair;
    }

JavaScript:

Загрузите и установите изображение на верхний слой:

var img = new Image,
    canvas = document.getElementById('canvasBottom'),
    canvasTop = document.getElementById('canvasTop'),
    ctx = canvas.getContext('2d'),
    ctxMouse = canvasTop.getContext('2d');

img.onload = setup;
img.src = 'http://i.imgur.com/HNiER0v.png';

ctx.lineWidth = 5;
ctx.strokeStyle = 'rgb(0, 100, 255)';

function setup() {
    ctxMouse.drawImage(this, 0, 0);
}

Ручка мыши:

var px, py, isDown = false;

canvasTop.onmousedown = function (e) {
    var pos = getXY(e);
    px = pos.x;
    py = pos.y;
    isDown = true;
}

canvasTop.onmouseup = function () {
    isDown = false;
}

canvasTop.onmousemove = function (e) {
    if (isDown) {
        var pos = getXY(e);
        ctx.beginPath();
        ctx.moveTo(px, py);
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
        px = pos.x;
        py = pos.y;
    }
}

function getXY(e) {
    var rect = canvasTop.getBoundingClientRect();
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    };
}

Как видите, теперь вы можете рисовать за первоначальным рисунком:

(Теперь, если это не шедевр, то я не знаю, что такое шедевр..!)