function drawStack(context, value, color, w, h, dX, dY, sX, sY){
  //var value = document.getElementById(value).value;
  var c = document.getElementById(context);
  var ctx = c.getContext("2d");

    var width = w;
    var height = h;
    var distanceX = dX;
    var distanceY = dY+1;
    var shiftX = sX;
    var shiftY = sY;





  ctx.clearRect(0, 0, 300, 300);
  ctx.beginPath();


  // determine number of whole coins (1 coin = 10 ECUs)
  nFullCoin = (value - (value%10))/10;

  /////// draw full coins
  var currentTower = 0;
  var currentLevel = -1;
  for(var i=0; i<nFullCoin; i++ ){
      if(i%5==0){
          currentTower += 1;
          currentLevel = -1;
      }
      //draw two times, to make color stronger an even throughout the whole tower
      ctx.rect(shiftX+currentTower*distanceX,shiftY+currentLevel*distanceY,width,height);
      ctx.rect(shiftX+currentTower*distanceX,shiftY+currentLevel*distanceY,width,height);
      currentLevel-=1;
  }

  ctx.strokeStyle = "black";
  ctx.lineWidth = 2;
  ctx.fillStyle = color;
  ctx.stroke();
  ctx.fill();

  /////// draw the incomplete coin (incomplete coin < 10 ECU)
  if(value%10!=0){
      heightIncompleteCoin = value%10;;
      // check if tower is full
      if(currentLevel==-6){
          currentTower += 1;
          currentLevel = -1;
      }
      ctx.beginPath();
      ctx.rect(shiftX+currentTower*distanceX,shiftY-1+(currentLevel+1)*distanceY-heightIncompleteCoin,width, heightIncompleteCoin);
      ctx.rect(shiftX+currentTower*distanceX,shiftY-1+(currentLevel+1)*distanceY-heightIncompleteCoin,width, heightIncompleteCoin);
      ctx.strokeStyle = "black";
      ctx.fillStyle = color;
      ctx.stroke();
      ctx.fill();
  }



  ctx.beginPath();
  ctx.fillStyle = "black";
  ctx.fillText((value*0.05).toFixed(2)+" CHF",10,85);
  ctx.fill();

  /*
  // rect: x,y,breite,höhe
  var x = 0;
  var y = 0;
  var height = 4*50;
  var width = w;
  var distance = dist;
  var posX = x+10;
  var posY = c.height-y-height-20;
  ctx.lineWidth = 1;
  //ctx.rect(posX, posY, width, height);
  //ctx.fillText(height,posX+width/2-5,posY+height/2+5;

  // draw six towers à 50 coins each
    /*
  ctx.strokeStyle = "lightgray";
  ctx.beginPath();
  for(i = 0; i<6;i++){
    shift=(width+distance)*i;
    ctx.rect(10+shift,posY,width, height);
  }
  ctx.stroke();


  //var residual=0;
  var amount = [50,1];
  var stack = [0,0,0,0]
  var current_value=value;
  for(i = 0; i < amount.length; i++){

    residual=(current_value%amount[i]);
    stack[i]=(current_value-residual)/amount[i];
    current_value=residual;
  }
  // draw actual amount
  ctx.strokeStyle = "gray";
  ctx.beginPath();
  shift=0;
  height = amount[3]*5;
  ctx.font = "15px Segoe UI";
  for(z = 0; z < stack.length; z++){
    stackFull = false;
    index=0;
    for(k = 0; k < stack[z]*amount[z]; k++){
      if(index >= 50){
        shift+=(width+distance);
        index = 0;
      }
      if(k%amount[z]==0 && amount[z]!=1){
        ctx.fillText(amount[z], shift+distance-5, c.height-5)
      } else if (k%(amount[z]*stack[z])==0 && amount[z]==1) {

        ctx.fillText(amount[z]*stack[z], shift+distance-5, c.height-5)
      }
      height = 5;
      posY = c.height-y-height-20;
      ctx.rect(shift+10,posY-(index)*4,width, 5);
      index+=1;
    }
    shift+=(width+distance);
  }
  var total = 0;
  for(p = 0; p< amount.length; p++){
    total+=stack[p]*amount[p];
  }
  ctx.stroke();
  ctx.font = "bold 15px Segoe UI";
  //ctx.fillText(total+" ECU", 65,295);
  ctx.stroke();
    */
}