使用画布在图像上绘制

Question

I have a picture which which is loaded like this:

<img src="map/racetrack.jpg" id="map">

And here is my drawing function:

this.drawRoute = function(){
    var pos = [];
    var canvas = $('<canvas/>')[0];
    var img = $('#map')[0]; 
    var ctx = canvas.getContext("2d");

    canvas.width = img.width;
    canvas.height = img.height;
    $(window).on('mousedown', function(e){
        pos.push({
            x: e.clientX,
            y: e.clientY
        });
    });

    if (positions.length > 1) {

        ctx.beginPath();
        ctx.moveTo(pos[0].x, pos[0].y);
        for (var i = 1; i < pos.length; i++) {
            ctx.lineTo(pos[i].x, pos[i].y);
        }
        ctx.stroke();
    }

}

But nothing is drawn on the picture. I can't see where the mistake is. I know usually I'm supposed to use <canvas> element, but I only need this particular part done in canvas, nothing else.

Here's the fiddle

Answer 1

Well a few things first you have no canvas element. Secondly I didnt see where you were calling the draw portion.

Live Demo

What I ended up doing was adding a canvas element, hiding the image, and then every time you draw it draws the image to the canvas, and then draws the points over it. This should hopefully be enough to get you started.

    var pos = [];
    var canvas = $('#canvas')[0];
    var img = $('#map')[0];
    var ctx = canvas.getContext("2d");

    canvas.width = img.width;
    canvas.height = img.height;


    function render() {
        ctx.drawImage(img, 0, 0);

        if (pos.length > 1) {
            ctx.beginPath();
            ctx.moveTo(pos[0].x, pos[0].y);
            for (var i = 1; i < pos.length; i++) {
                ctx.lineTo(pos[i].x, pos[i].y);
            }
            ctx.stroke();
        }
    }

    $(window).on('mousedown', function (e) {
        pos.push({
            x: e.clientX,
            y: e.clientY
        });
        render();
    });

render();