[Tween 18000px wide image on canvas]

Hi guys!

 

Thanks the lot of help!

 

@OSUblake:

What do you think, what is the best size if a cut to pieces this big image?

 

@Jonathan:

Do you sure that optimizing is good way?

I think client will need more performance to extract the compressed image.

 

@Carl 

Can I change the canvas render frequency?

 

 

Best regards,Feco

[Tween 18000px wide image on canvas]

Hi,

 

We created a small game, where we tween a very long image (18000px) on the canvas.

It has good performance on Chrome with a strong pc.

But the tween is vey laggy on standard laptop or Firefox / IE.

 

And I think this is relevant snippet:

function init() {
    canvas = document.getElementById("bg").getContext("2d");
    img = new Image();
    img.xpos = 0;
    img.ypos = 0;
    img.src = "img/bg.jpg";
    img.onload = function() {
        animate();
    }

    $('#trigger').click(function() {
        TweenMax.to(img, 60, {xpos:-17807, ypos:0, force3D:true, ease:Linear.easeNone});
        TweenMax.to($('#egg_container'), 60, {x:-17807, force3D:true, ease:Linear.easeNone});           
        TweenLite.ticker.addEventListener("tick", animate);
    });       
}

function animate() {
    canvas.drawImage(img, img.xpos, img.ypos);
}
init()

We do something wrong?

How can be the tween animation smooth on everywhere.

 

We have BusinessGreen plan, please help!

 

Best regards,

Ferenc Krix

 

 

 

See the Pen MyezpL by zabalint (@zabalint) on CodePen