CODEWITHSUNDEEP
jqueryfirefoxcanvas
David Biga
David Biga

Reputation: 2801

Canvas - Firefox Issue

Working on a project of mine, I just realized that I am having trouble with displaying text rendered by an image using canvas and JQuery.

Code:

//get values
        var current = $(".activeText a div").attr('id');

        //get font family
        var fFamily = $(".activeText a .fontType-cont").val();

        // default remove old
        $(".customize-Container #draggable").remove();
        //create a canvas for image converting

        $(".customize-Container").append("<div id='draggable'><canvas id='"+current+"'></canvas></div>");
        //create canvas

        var canvas = document.getElementById(current),
        ctx = canvas.getContext('2d'),
        img = document.createElement('img');
        //draw it
        img.onload = drawSmall;
        img.src = $(".activeGColor").find('img').attr('src');

        function drawSmall() {
            var text = $("#fontEnter").val();
            //define new font size
            howMuch = startFontSize - howMuch;
            //define var with new font size
            startFontSize = howMuch;
            //define text font size and family
            ctx.font = howMuch + 'px ' + fFamily;
            //fill with the text
            ctx.fillText(text, 10, 100);
            //draw text
            ctx.globalCompositeOperation = 'source-in';
            ctx.drawImage(img, 10, 20, 500, 100);
        }

Here is what happens, this is a function inside a re sizer. This particular function decreases the text size. Now what happens is before I am using similar code to display the text and that works perfect. Now once this function is selected the text disappears and does not finish its process, leaving the canvas blank.

I've used alert() to see where it stops and it seems to stop on the img.onload = drawSmall; without entering the drawSmall() function.

This works perfect in Chrome an IE (<-- wow right?) Let me know your suggestions.

David

UPDATE:

Just realized that Firefox is telling me this:

[14:08:46.456] ReferenceError: drawSmall is not defined @ ../wp-content/themes/twentytwelve/js/jquery-latest.min.js:297

Upvotes: 0

Views: 164

Answers (1)

David Biga
David Biga

Reputation: 2801

Funny the way FireFox works. This is what needed to happen:

function drawSmall() {
      ...
}
//get values
var current = $(".activeText a div").attr('id');
var text = $("#fontEnter").val();
//get font family

..the rest

function drawSmall() needed to be declared before the canvas was being declared.

Upvotes: 1

Related Questions