jQuery animate to move text on a canvas

Question

All of the examples of using animate I have seen have been using HTML elements. In my game I just have the canvas element and all the text is being drawn on the canvas. I want to be able to create text on the screen and have it scroll from left to right on the canva.

I found this code,

$({ left: 0 }).animate({ left: 10 }, {duration: 1000, step: function(now, fx) {
  $("#test").css('left', now);
}});

with jsfiddle - http://jsfiddle.net/AgPmN/

This is exactly what I need, but it again uses $("#test"). Can I change this so that value is just a JavaScript value and that it will scroll across a canvas?

Answer 1

The question is

This is exactly what I need, but it again uses $("#test"). Can I change this so that value is just a JavaScript value and that it will scroll across a canvas?

And yes you can, you can just get rid of the jQuery inside the callback for animate() and use the now variable for anything you'd like, for instance moving text on a canvas

$({ left: 300 }).animate({ left: 10 }, {duration: 5000, step: function(now, fx) {
    moveMyFrackingCanvas(now);
}});

function moveMyFrackingCanvas(val) {
    var c=document.getElementById("myCanvas");
    c.width = c.width;
    var ctx=c.getContext("2d");
    ctx.font="30px Verdana";
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    ctx.fillStyle=gradient;
    ctx.fillText("Holy Crap!", val, 90);
}

FIDDLE

Answer 2

No. There is a specific difference between DOM Nodes ( aka what is rendered into memory via HTML tags ) vs Canvas pixel drawing.

If you console.dir() some jQuery object in Google Chrome you will see all the attributes associated with that element(dom node). This is NOT the case with drawings on canvas. Canvas itself has attributes like other nodes but the actual rendered drawing does not render into a DOM structure. Its JUST pixel data, like adobe photoshop, as opposed to nodes like in adobe illustrator.

Familiarize yourself with object oriented javascript and the reasons above will become blatantly obvious.

Answer 3

Looks like someone's answered this, here: using-jquery-animate-on-canvas-objects

It refers to drawing shapes, but unless you're animating other HTML/XML/SVG elements within the canvas' hierarchy, drawing text should be little different.

To give at least a simple answer, myself, though... Whatever function you use to render the text and draw to the canvas, run that over a span of time, modifying the position of the text draw during. You can use setTimeout or setInterval to accomplish this.

function drawText(position)
{ ... }

function runItAll()
{
    pos1 = {x:0,y:0};
    pos2 = {x:10,y:20};
    var time = 4000; // 4 seconds
    var start = new Date().getTime()
    var interval = setInterval(function()
    {
        // Get the progress int time over animation span in a value between 0-1.
        var progress = (new Date().getTime() - start) / time;

        // Get the new position value, given pos1 and pos2.
        var pos = {
            x:(pos2.x-pos1.x)*progress + pos1.x,
            y:(pos2.y-pos1.y)*progress + pos1.y
        };

        // Run whichever function it is that does the drawing.
        drawText(pos);
    },30);

    // Clear the interval on animation completion.
    setTimeout(function(){clearInterval(interval);},time);
}

I've not tested the code, but that should be the gist of it.

Oh. Right. And unless you're using jQuery for timing, or structuring your function calls, it is completely unrelated to canvas animation.