Html5 Canvas

Tomeo · May 18, 2012

Hi,

i am trying to make tweens work within canvas, but no luck. Well its actualy my first time i am trying to do something with canvas, so there must be something i did wrong?

Gratz on the new release, it looks great!

function animate(myRectangle){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);

context.fillStyle = "#8ED6FF";
context.fill();

   TweenLite.to(myRectangle, 1.5, {x:100, y:200});
  }

  window.onload = function(){
var myRectangle = {
 x: 0,
 y: 50,
 width: 100,
 height: 100
};

var date = new Date();
var time = date.getTime();
animate(myRectangle);
  };

Randall · May 18, 2012

This might be an approach for example purposes, not for real live production, assuming you meant to tween the canvas as a whole:

<canvas id="myCanvas" style="position:absolute;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function animate(myRectangle){
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = "#8ED6FF";
context.fill();
TweenLite.to(canvas, 1.5, {css:{left:'100px', top:'200px'}});
}
function doAnimation(){
var theRectangle = {
 x: 0,
 y: 50,
 width: 100,
 height: 100
};
var date = new Date();
var time = date.getTime();
animate(theRectangle);
};
setTimeout('doAnimation()', 2000);
</script>

If you want to animate/move individual elements within the canvas, then it gets more complex/tedious, but it's not that daunting. There's a cool tutorial here http://simonsarris.c...5-canvas-useful that explains some traditional moving of elements on the canvas. As for tweening elements in the canvas, I've not yet worked that out to any degree of reliability.

And, here http://lamberta.org/doodle-js/ is another variation of animating on the HTML5 canvas - perhaps the Greensock JS Animation Platform could be integrated just as well in similar fashion?

GreenSock · May 19, 2012

The key concept to grasp here is that the canvas needs to be redrawn on each frame, otherwise you'll never see the changes. So in your example, TweenLite was tweening the rectangle's properties fine, but you never saw the changes because you never redrew the canvas.

You can easily use an onUpdate on your tween like in this simple example:

var canvas = document.getElementById("myCanvas"),
ctx = canvas.getContext("2d"),
rect = {x:0, y:50, width:100, height:100};

function draw() {
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(rect.x, rect.y, rect.width, rect.height);
ctx.fillStyle = "#8ED6FF";
ctx.fill();	
}

TweenLite.to(rect, 1.5, {x:100, y:200, onUpdate:draw});

Or for a more robust solution, it'd be wise to just add a listener to the TweenLite.ticker that calls a draw() function every time the engine updates (think of it like an onUpdateAllTweens).

TweenLite.ticker.addEventListener("tick", draw);
function draw() {
   //your drawing code here...
}

But you might want to look into Grant Skinner's EaselJS because it makes a lot of this routine redrawing stuff much simpler. You can use TweenLite with EaselJS (you don't need to use Grant's TweenJS). Or there are a bunch of other frameworks out there that will make working with a Canvas object easier.

Does that help?

Tomeo · May 19, 2012

Yes, this is it. Grant Skinner's EaselJS looks very nice also. Will definitely take a closer look.

Thank you both guys.

m_k_amin · June 22, 2013

If you are beginner in HTML5 Canvas, try to learn it step by step. Go to the following links. You can find new thing from each HTML5 Free Code and example easyly.

Canvas- Lines with Different Ending and Joining Styles

Canvas- Draw Polygons with Shadow Effect

Canvas- Use Writing Features to Draw Texts

Canvas- Image Patterns as Filling and Drawing Styles

Canvas- Select an Object by Mouse Click (Hit Detection)

Canvas- Coordinate System Transformation, Scaling and Shearing the Context