We Keep Coding

How to animate image in a canvas using tweenlite

Been searching for a while now and I haven't seen any article on how to animate (loop continuously from right to left) an imaged drawn in a canvas
var context = document.getElementById('my-canvas').getContext('2d');
var cloud = new Image();
cloud.src = 'images/cloud.png';
cloud.onload = function () {
context.drawImage(cloud, 0, 0)
TweenLite.to({x:0,y:0}, 2, {x: 200, y: 200});
}
What am I getting wrong?
edit:
Like so but using tweenlite : fiddle

Your first argument is wrong, it needs to be the target element/object according to their documentation:
TweenLite.to(target, duration, vars);
where target is an object/element, duration as a number, and vars an object.
Example:
TweenLite.to(canvas, 2, {x: 200, y:200});
Just note that if you intend to use the canvas element as target you could might as well just animate the image directly when loaded.
If you intend to move it across the canvas' bitmap without moving the canvas itself you will need to use a custom object (as I understand their docs) as target holding f.ex. the x and y properties, and use the onUpdate callback mechanism. Check their documentation for all the gory details.
var myObj = {
x: 0, // start position
y: 0,
image: cloud
};
TweenLite.to(myObj, 2, {x: 200, y:200, onUpdate: drawImage});
function drawImage() {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(myObj.image, myObj.x, myObj,y);
}
Just replace what you have inside the onload handler with the code above.
Disclaimer: highly untested..

Error 1105: Target of Assignment must be a Reference Value

Flash says the code is on my second line, but I've done some reading and it says this error is mainly due to me trying to assign a value to a value, and I've looked back over my code, and I can't seem to find any instance of this.
Here is my code:
this.mc=new MovieClip();
addChild(mc)=("myButton1", this.DisplayOBjectContainer.numChildren());
myButton1.createEmptyMovieClip("buttonBkg", myButton1.getNextHighestDepth());
myButton1.buttonBkg.lineStyle(0, 0x820F26, 60, true, "none", "square", "round");
myButton1.buttonBkg.lineTo(120, 0);
myButton1.buttonBkg.lineTo(120, 30);
myButton1.buttonBkg.lineTo(0, 30);
myButton1.buttonBkg.lineTo(0, 0);
Thanks!

Check what you are trying to in these lines:
addChild(mc)=("myButton1", this.DisplayOBjectContainer.numChildren());
myButton1.createEmptyMovieClip("buttonBkg", myButton1.getNextHighestDepth());
To create an empty MovieClip, you can just create a new display object w/o linking it to a clip in the library like this:
addChild(mc);
var myButton1:MovieClip = new MovieClip(); // creates an empty MovieClip
addChildAt(myButton1, numChildren); // adds the MovieClip at a defined level (on this case, the numChildren added on stage

Your code is very confusing. You mix AS2 methods (createEmptyMovieClip, getNextHighestDepth) with AS3 methods (addChild). Here is what you are trying to do:
const MC:Sprite = new Sprite(); // Sprite container
this.addChild(MC);
const MYBUTTON1:Sprite = new Sprite(); // button in container
MC.addChild(MYBUTTON1);
const BUTTONBKG:Shape = new Shape(); // background in button
MYBUTTON1.addChild(BUTTONBKG);
const BTG:* = BUTTONBKG.graphics;
BTG.beginFill(0x86B1FB);
BTG.lineStyle(0, 0x820F26, 0.6, true, "none", "square", "round");
BTG.lineTo(120, 0);
BTG.lineTo(120, 30);
BTG.lineTo(0, 30);
BTG.lineTo(0, 0);
MYBUTTON1.addEventListener(MouseEvent.CLICK, pressButton);
function pressButton(e:MouseEvent):void {
trace('I click on you');
}
Notes : the alpha value in AS3 is between 0 and 1. If you want your button to be clickable, you should use beginfill method.

How to change properties of element in JSXGraph?

Suppose, I have the following piece of code:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]]);
How can I change second point of axis?
Something like ax2.setSecondPoint([2,0])?
In general, how can I set property of any element?
Thank you.

Axis has two properties which names are self-explanatory: point1 and point2.
You can use setPosition method on any of them, e.g.
ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0])
Now there is one catch: you will not see this change on the chart unless you set needsRegularUpdate property of the axis object to true. Finally, to refresh the chart you should execute fullUpdate() method on the board variable. The whole looks like this:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]],{needsRegularUpdate:true});
ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0]);
brd2.fullUpdate();
References:
http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Point.html#setPosition
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Options (search for "special axis options")
Now to change properties like fixed, visible, etc. you should use setAttribute method (setProperty is deprecated). Example:
// Set property directly on creation of an element using the attributes object parameter
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 5, 5, 1]};
var p = board.create('point', [2, 2], {visible: false});
// Now make this point visible and fixed:
p.setAttribute({
fixed: true,
visible: true
});
Source:
http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.GeometryElement.html#setAttribute
Last but not least a simple formula:
a + b = c
where:
a = using JavaScript debugging tools in browsers to investigate object properties
b = checking documentation for products you use
c= success :)

Raphaël JS paper.getById() returns null

I'm trying to get the Raphaël object by using the getById() function, however no matter what I try the function returns null.
Here is the Raphaël JS code I'm working with:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
var circle = paper.circle(100, 100, 100);
circle.attr({"fill": "#f00", "id": "test"});
circle.data("id", "test");
var getCircle = paper.getById("test");
alert(getCircle); //Returns null?
Why doesn't paper.getById("test"); return the circle object?
I've defined the ID by both using attr() and data() yet nothing seems to work.
JsFiddle of the above code: http://jsfiddle.net/Mf9q6/

Read the documentation carefully:
Returns you element by its internal ID.
This is not the same as the id attribute on the element. The id expected by Paper.getById() is Element.id
You probably want var getCircle = paper.getById(circle.id); which is just a reference to the same object as circle anyway.
Here's your fiddle, updated.

If I understood your question correctly, you are trying to set id to your element. Then somewhere down the line get the element's id.
If it is the case then you are almost there:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
var circle = paper.circle(100, 100, 100);
circle.attr({"fill": "#f00", "id": "test"});
circle.data("id", "test");
var getCircle = circle.data("id");
alert(getCircle); //Returns test
EDIT
If you are trying to get the circle by the value, like in your example "test"
paper.forEach(function (el)
{
if (el.data("id") == "test")
// return el - do what you want
});

Dynamically calling Canvas Functions

Is there any way to call canvas functions using apply() or a similar method, as to dynamically call canvas methods or to be able to pass an array of arguments?
Im looking for this effect
context.fillRect.apply(this,args);

If I understand you correctly:
var op = "fillRect";
var args = [
10, 10, 180, 180
];
ctx[op].apply(ctx, args);
Example: http://jsfiddle.net/eZwYQ/

your apply method should work just fine :
function rectangle(){
ctx.fillRect.apply(ctx,arguments);
}
And of course this can get more "dynamic" :
function doSomethingWithCanvas(context,action,arg1,arg2/*,...argn*/){
context[action].apply(context,Array.prototype.slice.call(arguments,2));
}
And you could use the same function to fill a rectangle, to draw a circle or to draw a simple line :
// simple line
doSomethingWithCanvas(ctx,'lineTo',10, 100);
// circle
doSomethingWithCanvas(ctx,'arc',275, 275, 200, 0, Math.PI*2, true);
// fillRect
doSomethingWithCanvas(ctx,'fillRect,10, 10, 180, 180);
PS : by providing the canvas context as an argument, you can use this function to draw on any canvas.