Search the Community

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; TweenMax.killDelayedCallsTo("loop"); // 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); } Zee