for (var i = 0; i < walls.coordinates.length; i=i+10 )
        {


//// VANISHING POINT
        var vanish_x = canvas.width/2;
        var vanish_y = 25;


//// COLLISIOJN WALL BOX TOP LEFT & TOP RIGHT POINT
        var wallleft_x = walls.coordinates[i]-xscrolled;
        var wallleft_y = walls.coordinates[i+1]-yscrolled;


      ctx.lineWidth=1; //todo delete later
      ctx.beginPath();
      ctx.moveTo(vanish_x, vanish_y);
      ctx.lineTo(wallleft_x, wallleft_y);
      ctx.stroke();


        var wallright_x = walls.coordinates[i]+walls.coordinates[i+2]-xscrolled;
        var wallright_y = walls.coordinates[i+1]-yscrolled;

        var wallleft_x_offset = vanish_x - wallleft_x; // the horizontal distance between vanishing point and lefttop collision wall point
        var wallleft_y_offset = vanish_y - wallleft_y; // the vertical distance ...

        var wallright_x_offset = vanish_x - wallright_x; // the horizontal distance between vanishing point and righttop collision wall point
        var wallright_y_offset = vanish_y - wallright_y; // the vertical distance ...


      ctx.strokeStyle="green"; // todo delete later
      ctx.lineWidth=1;
      ctx.beginPath();
      ctx.moveTo(vanish_x, vanish_y);
      ctx.lineTo(wallright_x, wallright_y);
      ctx.stroke();



//// CLOSER WALLBOX TOP LEFT & TOP RIGHT POINTS

      var wallleftcloser_x = wallleft_x - wallleft_x_offset*0.1;  // top left closer point
      var wallleftcloser_y = wallleft_y - wallleft_y_offset*0.1;

      var wallrightcloser_x = wallright_x - wallright_x_offset*0.1; // top right closer point
      var wallrightcloser_y = wallleftcloser_y;

      ctx.fillStyle="red";  // todo delete later
      ctx.fillRect(wallleftcloser_x, wallleftcloser_y, -3,3);
      ctx.fillRect(wallrightcloser_x, wallrightcloser_y, 3,3);

/////FURTHER WALLBOX TOP LEFT & TOP RIGHT POINTS

      var wallleftfurther_x = wallleft_x + wallleft_x_offset*0.085; // top left further point
      var wallleftfurther_y = wallleft_y + wallleft_y_offset*0.085;

      var wallrightfurther_x = wallright_x + wallright_x_offset*0.085; // top right further point
      var wallrightfurther_y = wallleftfurther_y;

      ctx.fillStyle="cyan";  // todo delete later
      ctx.fillRect(wallleftfurther_x, wallleftfurther_y, -3,3);
      ctx.fillRect(wallrightfurther_x, wallrightfurther_y, 3,3);

/////DRAW GROUND VIA POLYGON

      ctx.fillStyle = '#262';
      ctx.beginPath();
      ctx.moveTo(wallleftfurther_x, wallleftfurther_y);
      ctx.lineTo(wallrightfurther_x,wallrightfurther_y);
      ctx.lineTo(wallrightcloser_x, wallrightcloser_y);
      ctx.lineTo(wallleftcloser_x, wallleftcloser_y);
      ctx.closePath();
      ctx.fill();


////// draw Hero from herobuffer on maincanvas////////

      ctx.drawImage(herobuffer,hero.x-hero.hitboxSize-xscrolled, hero.y-hero.hitboxSize*2-yscrolled);


/////DRAW RESIZED WALL from the wall array            //x                  //y                  //width                             /height
      ctx.drawImage(wall_prerendered_graphics[i*0.1], wallleftcloser_x, wallleftcloser_y, wallrightcloser_x - wallleftcloser_x, wall_prerendered_graphics[(i*0.1)].height);

        }