createCanvas(300, 300);

}

​

function draw() {

  background("White");

​

  //Flag Colors

  noStroke();

  var B = "Black";

  var Gy = "LightGray";

  var Wh = "White";

  var Pu = "Purple";

  var G = "LimeGreen";

  var lG = "PaleGreen";

​

  var FlagXAro = 0;

  var FlagXAce = width/ 2;

  var FlagW = width / 2;

  var FlagHAro = height / 5;

  var FlagHAce = height / 4;

  //Aro Flag

  fill(G);

  rect(FlagXAro, 0, FlagW, FlagHAro);

​

  fill(lG);

  rect(FlagXAro, height - 240, FlagW, FlagHAro);

​

  fill(Wh);

  rect(FlagXAro, height - 180, FlagW, FlagHAro);

​

  fill(Gy);

  rect(FlagXAro, height - 120, FlagW, FlagHAro);

​

  fill(B);

  rect(FlagXAro, height - 60, FlagW, FlagHAro);

​

  //Ace Flag

  fill(B);

  rect(FlagXAce, 0, FlagW, FlagHAce);

​

  fill(Gy);

  rect(FlagXAce, height - 225, FlagW, FlagHAce);

​

  fill(Wh);

  rect(FlagXAce, height - 150, FlagW, FlagHAce);

​

  fill(Pu);

  rect(FlagXAce, height - 75, FlagW, FlagHAce);

​

  //Spade

  var X1 = width - 170;

  var X2 = X1 + 40;

  var Y = height / 2;

  var W = 55;

  var H = 70;

​

  strokeWeight(4);

  fill("Black");

  ellipse(X1, Y, W, H); //Left

  ellipse(X2, Y, W, H); //Right

​

  triangle(135, 210, 165, 210, 150, 170); //Base

  triangle(111, 126, 190, 126, 150, 80); //Top

​

  //Arrow

  var LXY1 = 100;

  var LXY2 = 200;

​

  stroke("Black");

  strokeWeight(8);

  line(LXY1, LXY1, 200, 200);

  line(LXY2, LXY2, 190, 200);

  line(LXY2, LXY2, 200, 188);

  line(LXY1, LXY1, 100, 90);

  line(LXY1, LXY1, 90, 100);

}

​