Can't set image background for Container element

[fadighattas100]

Hi i can't set image background for Container element just a colored background using fill property and i try to set asset to image but not working.

[viki53]

If you want to paint in a canvas, you'll have to use the appropriate methods.

my_container.draw = function(ctx) {
    ctx.fillStyle = '#e0b232'; // Yellow background
    ctx.fillRect(this.p.x, this.p.y, this.p.w, this.p.h); // We draw a rectangle the size of the sprite (which is the container)
    var gradient = ctx.createRadialGradient(Q.width/2, Q.height/2, 0, Q.width/2, Q.height/2, Q.width/2);
    gradient.addColorStop(0, '#ffffff'); // White center
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)'); // Transparent end
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, Q.width, Q.height); // Draw the gradient on top of the yellow rectangle
};

You can also use a simple Sprite with an associated asset and place it wherever suitable.

[fadighattas100]

ok thanks i try to use your code but i can't understand how can we use it so please if you give an example it will be mush helpful and i try something else and it work like you said "use a simple Sprite with an associated asset and place it wherever suitable." so i used two containers one with the background image and second one with the bouttens like this:

  var Q = window.Q = Quintus().include("Sprites, Scenes, Touch, UI");
  Q.setup({ maximize: true, scaleToFit:true }).touch(Q.SPRITE_ALL);

  var bids =[{Value: 7, Asset: 'M-7.jpg'},
       {Value: 8, Asset: 'M-8.jpg'},
       {Value: 9, Asset: 'M-9.jpg'},
       {Value: 10, Asset: 'M-10.jpg'},
       {Value: 11, Asset: 'M-11.jpg'},
       {Value: 12, Asset: 'M-12.jpg'},
       {Value: 13, Asset: 'M-13.jpg'}],
z=1;

    Q.scene('BED_UI', function(stage){

    var layoutContainer = stage.insert(new Q.UI.Container({
    fill:'rgba(255, 255, 255, 0)'
    }));

    var container = stage.insert(new Q.UI.Container({
    fill: 'rgba(255, 255, 255, 0)',
    y: ((40/100)*Q.el.height),
    x: ((50/100)*Q.el.width)
    }));

    for(sub in bids){
   stage.insert(new Q.UI.Button({
        value: bids[sub].Value,
      asset: bids[sub].Asset,
    scale: 0.60,  
    x: (100*0.60)*z
    }, function() {
      this.p.angle += 90;
        //alert(this.p.value);
    }),container);
z++;
}

stage.insert(new Q.UI.Button({
  asset: 'PASS.jpg',
  x: (100*0.60)*4,
  y: (100*0.90),
  scale: 0.60
}, function() {
  alert('pressed');  
}),container);

  container.fit(0,0);
  stage.insert(new Q.Sprite({asset:'Card_Table.jpg',scale:0.70,x:container.p.x,y:container.p.y}),layoutContainer);
 stage.insert(container,layoutContainer);
 container.p.x = ((50/100)*Q.el.width)-((52/100)*container.p.w);
layoutContainer.fit(0,0);
}); 

Q.load(['M-7.jpg','M-8.jpg','M-9.jpg','M-10.jpg','M-11.jpg','M-12.jpg','M- 13.jpg','PASS.jpg','Card_Table.jpg'], function(){
Q.stageScene('BED_UI');
});

and it look like this:

[viki53]

Okay, so what's missing ? Where is your problem with this code?

[fadighattas100]

no problem with my code it working and give the result i want :) but i can't understand how to use your code so if you please give us a full example on how to use it and thanks again for you :)

[viki53]

Well it's taken from my tutorial, with a demo here: http://www.corentin-hatte.eu/tuto-quintus/partie-2.html
The code I gave you is used to draw the gradient in the background.

Glad I could help. ;)

P.S.: May I close the issue?