HTML5 Canvas bezier curves - background does not want to load

Question

Is there anyone able to help me with the script? See jsfiddle.net/7QmSz/3 .

HTML:

<canvas id="canvas" height="1000" width="1000" class="bezier" style="cursor: default;"></canvas>

CSS:

#canvas
{
    position: absolute;
    left: 100px;
    top: 100px;
    background-color: rgba(255, 255, 255, 0.1);
}

JavaScript:

(function() {
    var canvas;
    var ctx; 
    var code; 
    var point;
    var style;
    var drag = null; 
    var dPoint;

    function Init(quadratic) {
        point = {
            p1: { x:50, y:100 },
            p2: { x:200, y:100 },
            p3: { x:50 , y:100 },
            p4: { x:200 , y:100 }
        };

        if (quadratic) {
            point.cp1 = { x: 50, y: 50 };
            point.cp3 = { x: 250, y: -110 };
        }
        else {
            point.cp1 = { x: 50, y: 10 };
            point.cp2 = { x: 200, y: 10 };
            point.cp3 = { x: 50, y: 190 };
            point.cp4 = { x: 200, y: 190 };
        }

        style = {
            curve:  { width: 2, color: "#C0C0C0" },
            cpline: { width: 1, color: "#C0C0C0" },
            point: { radius: 3, width: 1, color: "#C0C0C0", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI },
        }

        ctx.lineCap = "round";
        ctx.lineJoin = "round";

        canvas.onmousedown = DragStart;
        canvas.onmousemove = Dragging;
        canvas.onmouseup = canvas.onmouseout = DragEnd;

        DrawCanvas();
    }

    function DrawCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.lineWidth = style.cpline.width;
        ctx.strokeStyle = style.cpline.color;
        ctx.beginPath();
        ctx.moveTo(point.p1.x, point.p1.y);
        ctx.lineTo(point.cp1.x, point.cp1.y);
        if (point.cp2) {
            ctx.moveTo(point.p2.x, point.p2.y);
            ctx.lineTo(point.cp2.x, point.cp2.y);
        }
        else {
            ctx.lineTo(point.p2.x, point.p2.y);
        }
        ctx.stroke();

        ctx.lineWidth = style.cpline.width;
        ctx.strokeStyle = style.cpline.color;
        ctx.beginPath();
        ctx.moveTo(point.p3.x, point.p3.y);
        ctx.lineTo(point.cp3.x, point.cp3.y);
        if (point.cp2) {
            ctx.moveTo(point.p4.x, point.p4.y);
            ctx.lineTo(point.cp4.x, point.cp4.y);
        }
        else {
            ctx.lineTo(point.p4.x, point.p4.y);
        }
        ctx.stroke();

        ctx.lineWidth = style.curve.width;
        ctx.strokeStyle = style.curve.color;
        ctx.beginPath();
        ctx.moveTo(point.p1.x, point.p1.y);
        if (point.cp2) {
            ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y);
        }
        else {
            ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
        }
        var img = new Image();
        img.src = 'http://img201.imageshack.us/img201/5708/eyeq.jpg';
        var pattern = ctx.createPattern(img, 'repeat')
        ctx.globalAlpha = "1";
        ctx.fillStyle = pattern;
        ctx.fill();
        ctx.stroke();

        ctx.lineWidth = style.curve.width;
        ctx.strokeStyle = style.curve.color;
        ctx.beginPath();
        ctx.moveTo(point.p3.x, point.p3.y);
        if (point.cp3) {
            ctx.bezierCurveTo(point.cp3.x, point.cp3.y, point.cp4.x, point.cp4.y, point.p4.x, point.p4.y);
        }
        else {
            ctx.quadraticCurveTo(point.cp3.x, point.cp3.y, point.p4.x, point.p4.y);
        }
        var img = new Image();
        img.src = 'http://img201.imageshack.us/img201/5708/eyeq.jpg';
        var pattern = ctx.createPattern(img, 'repeat')
        ctx.globalAlpha = "1";
        ctx.fillStyle = pattern;
        ctx.fill();
        ctx.stroke();

        for (var p in point) {
            if(p == 'cp1' || p == 'cp2' || p == 'cp3' || p == 'cp4')
            {
                ctx.lineWidth = style.point.width;
                ctx.strokeStyle = style.point.color;
                ctx.fillStyle = style.point.fill;
                ctx.beginPath();
                ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
                ctx.fill();
                ctx.stroke();
            }
            else
            {
                ctx.lineWidth = style.point.width;
                ctx.strokeStyle = style.point.color;
                ctx.fillStyle = style.point.fill;
                ctx.beginPath();
                ctx.rect(point[p].x - 4,  point[p].y - 4, 7, 7);
                ctx.fill();
                ctx.stroke();
            }
        }
    }

    function DragStart(e) {
        e = MousePos(e);
        var dx, dy;
        for (var p in point) {
            dx = point[p].x - e.x;
            dy = point[p].y - e.y;
            if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
                if(p == 'cp1' || p == 'cp2' || p == 'cp3' || p == 'cp4')
                {
                    drag = p;
                    dPoint = e;
                    canvas.style.cursor = "move";
                }
                return;
            }
        }
    }

    function Dragging(e) {
        if (drag) {
            e = MousePos(e);
            point[drag].x += e.x - dPoint.x;
            point[drag].y += e.y - dPoint.y;
            dPoint = e;
            DrawCanvas();
        }
    }

    function DragEnd(e) {
        drag = null;
        canvas.style.cursor = "default";
        DrawCanvas();
    }

    function MousePos(event) {
        event = (event ? event : window.event);
        return {
            x: event.pageX - canvas.offsetLeft,
            y: event.pageY - canvas.offsetTop
        }
    }

    canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        ctx = canvas.getContext("2d");
        Init(canvas.className == "quadratic");
    }
})();

The problem is that when you first load the page or refresh the browser, the script does not load a background image. Instead the default background is displayed. I don't know what the problem is.

Answer 1

you're not waiting for the image to finish downloading first, so the canvas will run through the rest of its code while your image isn't available yet. Force it to load first, either by having an <img> element with your image src prior to your canvas, or first create an Image(), give it an onload handler, and then set its src attribute, with the onload handler calling your canvas's code.