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?

Sure you can, just move whatever you want on the canvas, the `now` variable contains the current value? Are you really asking how to remove the line inside the callback and use the `now` variable for something else ? — adeneo, Apr 24 '14 at 15:45

score 3 · Accepted Answer · answered Apr 24 '14 at 16:03

3

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

answered Apr 24 '14 at 16:03

adeneo

312,895
29
395
388

Very cool. So this is just selecting an arbitrary value rather than an element? And using the value to create a new text fill on the canvas on refresh? I didn't realize you could use the animation tweening functions without selecting an element at all. +1 – jshanley Apr 24 '14 at 16:12
@jshanley - Yes you can, newer versions of jQuery actually have an undocumented `$.Animation` method with tweens built in. It's mostly used internally, and I think they are going to improve on that in the future to try and get up to speed with libraries like Greensock, that blows jQuery out of the water on animations, but for now the `step` method will let you animate just about anything with `animate()` – adeneo Apr 24 '14 at 16:15
Ah thanks, this is exactly what I was trying to do. Very neat. – user3407039 Apr 24 '14 at 21:52

score 0 · Answer 2 · answered Apr 24 '14 at 15:49

0

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.

answered Apr 24 '14 at 15:49

Jeff Scott Ward

69
1
7

Why did this get a downvote? This is correct. You cannot simply select text drawn to a canvas with jquery and hope to move it. If you want to do animation of a canvas, you need to make a function that repaints the canvas rapidly using `setInterval` or `requestAnimationFrame`, then in that function you would update the text position. There are libraries available to help with this, such as [`KineticJS`](http://kineticjs.com/docs/Kinetic.Animation.html) – jshanley Apr 24 '14 at 15:57
@jshanley - The OP has code, the `animate()` function with a `step` method, and wonders how to get rid of the jQuery inside the callback and animate something in a canvas instead, which is totally doable, but this answer doesn't really answer the question. It's also clear from the question that the OP has a game and knows how to get text onto a canvas, so lets assume he understood that jQuery selectors doesn't really work in a canvas, as he's asking specifically how to replace the jQuery selector and move something on a canvas. – adeneo Apr 24 '14 at 16:08
@adeneo I got ya, but... The idea with the upvote/downvote is just if the response is 'useful' or 'not useful'. The point being that if someone else comes to this question later, (maybe someone who doesn't understand selections etc. quite as well) they might find an answer like this to be useful. – jshanley Apr 24 '14 at 16:16
And here I was, thinking that the point was to answer the actual question? I get your point, many times when searching for something you find some answer that wasn't accepted or didn't really answer the question, that actually had the answer you were looking for, but first and foremost one should try to answer the question, and this answer is actually wrong and not at all what is asked ? – adeneo Apr 24 '14 at 16:20

score 0 · Answer 3 · edited May 23 '17 at 11:49

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.

jQuery animate to move text on a canvas

3 Answers3