8 of 9 saved 2 bytes

JavaScript (ES6), 52 bytes

Expects the second input format.

a=>a.map(k=>r-=(y+=(2-(a=a+k&3))%2)*(~-a%2),r=y=0)|r

Try it online!

How?

This is based on the formula already mentioned by @ngn: A = Σ(xi - xi+1)yi, which can also be written as Σdxiyi where dxi is either -1, 0 or 1.

We start with r = y = 0.

We keep track of the current direction in a:

          | a = 0 | a = 1 | a = 2 | a = 3
----------+-------+-------+-------+-------
direction | East  | South | West  | North
       dx |  +1   |   0   |  -1   |   0     <--  -(~-a % 2)
       dy |   0   |  +1   |   0   |  -1     <--  (2 - a) % 2

It is updated with a = a + k & 3, where k is the current element of the input array.

Because a initially contains the input array, a + k is coerced to NaN on the first iteration and then to 0 when the bitwise AND is applied. This means that the first direction change is actually ignored and we always start heading to East. It doesn't matter because the area remains the same, no matter the orientation of the final shape.

Then, we update y with y += (2 - a) % 2.

Finally, we compute -dx with ~-a % 2 and subtract y * -dx from r, which -- at the end of the process -- is our final result.