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 = 100 ECUs)
  nFullCoin = (value - (value%100))/100;

  /////// 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 < 100 ECU)
  if(value%100!=0){
      
      heightIncompleteCoin = value%100 / 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+" points",10,85);
  ctx.fill();
}