Using Canvas fillText() - HTML5, JavaScript

Question

I have a plugin that will fill text based on an image using the following:

function draw() {
        //grab font to use
        var fFamily = $(".activeText a .fontType-cont").val();
        ctx.font = startFontSize + 'px ' + fFamily;
        ctx.fillText(text, 10, 100);

        ctx.globalCompositeOperation = 'source-in';
        ctx.drawImage(img, 10, 20, 500, 100);
}

var canvas = document.getElementById(current),
ctx = canvas.getContext('2d'),
img = document.createElement('img');
//draw it
img.onload = draw;

img.src = $(".activeGColor").find('img').attr('src');

What happens is that the canvas will take that image, display it in the canvas and as the text gets bigger, you see it as the fill for the text. My issue is that, How can I make it so it does not look stretched or whatnot? Do I have an option to do so?

What are your ideas?

Answer 1

We need to see an example of whats going on here. Your question makes it sound like you have some sort of animation going on... that changes the font-size to a larger and larger size. The way things work by default, is that the text will render proportionally. However if your using any thing like ctx.scale() you obviously could throw that off. Also if your not clearing your canvas each frame, you could get more of a bleed effect, that you may be describing as stretching.