Jump to content


Image Blurs On Canvas

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,


Firslty a big thank you to GreenSock for this wonderful API. I'm not from a flash background and this framework has really made animation a whole lot easier for me, so a big thank you.


Secondly, I followed the Lee Brimelow tutorial that's linked off this site and decided to put together a little animation using the HTML5 Canvas. Everything is really smooth and it works perfectly, however the image seems to blur and sharpen, almost as if on each re-draw it's taking to long to render hence the blur.


It actually gives a nice motion blur effect and adds some extra realism to the moving space ships. However it's not what I need right now.


Since I'm new to animation is it possible that my canvas is just too big or maybe the png files I'm using are too big ?


Canvas Size (1000x700)

3 Image Files (421KB, 111KB, 84KB)


Here's my code if anyone wants to take a look.


Thanks in advance for any help.


var canvas = document.getElementById('red-ships');
var context = canvas.getContext('2d');

shipLarge = new Image();
shipLarge.src= "images/ship-pink-large.png";
shipLarge.xpos = 10;
shipLarge.ypos = 350;

shipMedium = new Image();
shipMedium.src= "images/ship-pink-medium.png";
shipMedium.xpos = 20;
shipMedium.ypos = 60;

shipSmall = new Image();
shipSmall.src= "images/ship-pink-small.png";
shipSmall.xpos = 550;
shipSmall.ypos = 170;


// calculate where you want to motion tween each ship to
largeToXpos = shipLarge.xpos -10;
largeToYpos = shipLarge.ypos +15;
mediumToXpos = shipMedium.xpos +5;
mediumToYpos = shipMedium.ypos +5;
smallToXpos = shipSmall.xpos -10;
smallToYpos = shipSmall.ypos +10;

TweenMax.to(shipLarge, 5, { xpos:largeToXpos, ypos:largeToYpos, repeat: -1, yoyo: true });
TweenMax.to(shipMedium, 4, { xpos:mediumToXpos, ypos:mediumToYpos, repeat: -1, yoyo: true});
TweenMax.to(shipSmall, 4, { xpos:smallToXpos, ypos:smallToYpos, repeat: -1, yoyo: true });

// binds the loop function to the tick event
shipLarge.onload = function () {
		   TweenLite.ticker.addEventListener("tick", loop);  

// redraw the elements
function loop() {
// clears the canvas before every re-draw

context.clearRect(0, 50, 1000, 750);
context.drawImage(shipLarge, shipLarge.xpos, shipLarge.ypos);
context.drawImage(shipMedium, shipMedium.xpos, shipMedium.ypos);
context.drawImage(shipSmall, shipSmall.xpos, shipSmall.ypos);



Link to comment
Share on other sites

Hi and welcome to the forums.


I am guessing that the blurriness may be due the anti-aliasing that occurs during sub-pixel rendering: http://seb.ly/2011/0...e-optimisation/


try using the roundProps Plugin:






TweenMax.to(shipLarge, 5, { xpos:largeToXpos, ypos:largeToYpos, repeat: -1, yoyo: true,
                   roundProps:"xpos, ypos" });


I'm very interested in seeing canvas and TweenLite demos, feel free to upload your files or post a link

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.