Bonjour,

Je suis actuellement entrain de faire un petit jeux avec Canvas et Javascript pour apprendre et je suis confronter à un probleme.

Je souhaiterais imbriquer plusieurs canvas et pouvoir afficher tous les objets à l'intérieur de chacun.

J'ai réussi à afficher 1 seul niveau de canvas mais impossible d'afficher les sous niveaux.

exemple de se que je souhaite réaliser :

voici le résultat :

Je n'arrive pas à afficher le carré vert :(.

Voici le code qui génère le carrée bleu :


var Container = Rectangle.extend(function(config){
    var childrens;
    var canvas;
    var context;
    var _parent
    this.constructor = function (config){
        this.super(config);
        canvas = (typeof config.canvas == "string" ) ? document.createElement('canvas') : config.canvas;
        canvas.id = (typeof config.canvas == "string" ) ? config.canvas : config.canvas.id;
        // vérifie que le canvas est supporter 
        Canvas.isCanvasSupported(canvas);
        // récupère le context 2d
        context = canvas.getContext('2d');
        // initialise les enfants
        this.childrens = new ArrayList();
    };
    /**
     * Permet de récupérer le container parent
     * @param {Container} 
     */
    this.getParent = function(){
        return _parent;
    };
    /**
     * Permet de modifier le container parent
     * @param {Container} p_parent 
     */
    this.setParent = function(p_parent){
       _parent = p_parent;
    };
    /**
     * Permet de dessiner les objet à l'intérieur du container
     * @return {void} 
     */
    this.render = function(){
        // carré vert
        context.beginPath();
        context.fillStyle = 'green';
        context.fillRect(10,10,10,10);
        // carré bleu
        _parent.context.fillStyle = 'blue';
        _parent.context.fillRect(this.getPosX(),this.getPosY(),this.getWidth(),this.getHeight()); 

    };
});

Je vous remercie d'avance pour votre aide

Aucune réponse