Oh Never mind,
I got it...
I can substitute the location as a string (say strname) and then call
it in the function as this.strname...
so something like this should work
var foo = new CanvasItem({
id : coinID,
x : x_cord,
y : y_cord,
w : 64,
h : 64,
state: 'normal',
interactive : true,
transition : 'quad:out',
sources : "images/Brown.png",
offset : [0,0],
events : {
onDraw :
function(ctx)
{
ctx.save();
ctx.translate(this.x, this.y);
var w =
this.w;
var h =
this.h;
var x =
this.x - w * .5;
var y =
this.y - h * .5;
if(this.state
== 'normal'){
ctx.drawImage(new Element("img", {src: this.sources}), w
* -0.5,h * -0.5);
On Sep 27, 3:31 pm, shouvik <[email protected]> wrote:
> Hi All,
>
> I am using a draw function to parse the values of the co-ordinated I
> need to draw at plus some other variables. Now I would like to parse
> the location of the image it need to draw on the canvas too, but I am
> not quite sure I know what the syntax might be.
>
> I hope one of you might take the time out to help me out!
>
> Thanks
>
> Code for what I am doing now
>
> CANVAS.addCoin = function(layer, x_cord, y_cord, coinID) {
> //console.log("Drawing Coin "+coinID);
> var foo = new CanvasItem({
> id : coinID,
> x : x_cord,
> y : y_cord,
> w : 64,
> h : 64,
> state: 'normal',
> interactive : true,
> transition : 'quad:out',
> offset : [0,0],
> events : {
> onDraw :
> function(ctx)
> {
>
> ctx.save();
>
> ctx.translate(this.x, this.y);
>
> var w = this.w;
> var h = this.h;
> var x = this.x - w *
> .5;
> var y = this.y - h *
> .5;
>
> if(this.state ==
> 'normal'){
>
> ctx.drawImage(new
> Element("img", {src: "images/Brown.png"}), w
> * -0.5,h * -0.5);
> }
>
> if(this.state ==
> 'hover'){
>
> ctx.drawImage(new
> Element("img", {src: "images/
> Brown_Press.png"}), w * -0.5,h * -0.5);
> }
>
> ctx.restore();
> this.setDims( x, y,
> w, h);
> }
> }
> });
> CANVAS.layers.get(layer).add(foo);
> return foo;
> };
>
> What I would like to pass to the function should be the location src:
> images/Brown_Nor_6X6.png in ctx.drawImage(new Element("img", {src:
> "images/Brown.png"}), w * -0.5,h * -0.5);
