Write a program that inputs the dimensions of a painting, the matting width, and the frame width for a framed portrait. The program should output a diagram using the symbol ‘X ’ for the painting, ‘+’ for the matting, and ‘# ’ for the framing. The symbols must be space-separated.

INPUT: 3 2 1 2
(Width, Height, Matte Width, Frame Width)

OUTPUT:

In text form:

# # # # # # # # #

# # # # # # # # #

# # + + + + + # #

# # + X X X + # #

# # + X X X + # #

# # + + + + + # #

# # # # # # # # #

# # # # # # # # #

The winning code completes the following conditions in the least possible bytes.

JavaScript (ES6),  118  113 bytes

(w,h,M,F)=>(g=(c,n)=>'01210'.replace(/./g,i=>c(+i).repeat([F,M,n][i])))(y=>g(x=>'###+X#++'[y+x*5&7]+' ',w)+`

`,h)

Try it online!

Commented

(w, h, M, F) => (       // given the 4 input variables

  g = (                 // g = helper function taking:

    c,                  //   c = callback function returning a string to repeat

    n                   //   n = number of times the painting part must be repeated

  ) =>                  //

    '01210'             // string describing the picture structure, with:

    .replace(           //   0 = frame, 1 = matte, 2 = painting

      /./g,             // for each character in the above string:

      i =>              //   i = identifier of the current area

        c(+i)           //   invoke the callback function

        .repeat         //   and repeat it ...

        ([F, M, n][i])  //   ... either F, M or n times

    )                   // end of replace()

)(                      // outer call to g:

  y =>                  //   callback function taking y:

    g(                  //     inner call to g:

      x =>              //       callback function taking x:

        '###+X#++'      //         figure out which character to use

        [y + x * 5 & 7] //         by using a small hash function

        + ' ',          //         append a space

      w                 //       repeat the painting part w times

    )                   //     end of inner call

    + 'n',             //     append a line feed

  h                     //   repeat the painting part h times

)                       // end of outer call

Charcoal, 48 bytes

ＮθＮηＮζＮεＵＯ⁺θ⊗⁺ζε⁺η⊗⁺ζε#Ｍε↘ＵＯ⁺θ⊗ζ⁺η⊗ζ+Ｍζ↘ＵＯθηXＵＥ¹

Try it online! Link is to verbose version of code. Explanation:

ＮθＮηＮζＮε

Input the four values.

ＵＯ⁺θ⊗⁺ζε⁺η⊗⁺ζε#

Draw the framing.

Ｍε↘ＵＯ⁺θ⊗ζ⁺η⊗ζ+

Move to and draw the matting.

Ｍζ↘ＵＯθηX

Move to and draw the painting.

ＵＥ¹

Double-space the output horizontally.

Alternative solution, also 48 bytes:

ＮθＮηＮζＮεＵＯ⁺θ⁺ζε⁺η⁺ζε#ＵＯ⁺θζ⁺ηζ+ＵＯθηX‖ＯＯ←θ‖ＯＯ↑ηＵＥ¹

Try it online! Link is to verbose version of code. Explanation:

ＮθＮηＮζＮε

Input the four values.

ＵＯ⁺θ⁺ζε⁺η⁺ζε#

Draw the framing, but not to the left or above the painting.

ＵＯ⁺θζ⁺ηζ+

Draw the matting, but not to the left or above the painting.

ＵＯθηX

Draw the painting.

‖ＯＯ←θ‖ＯＯ↑ηＵＥ¹

Reflect and double-space the output horizontally.

Python 3.8 (pre-release), 116 115 bytes

lambda a,b,c,d,e='#',f='+':"n".join((g:=[e*(a+2*c+2*d)]*d+[(h:=e*d)+f*(a+c*2)+h]*c)+[h+f*c+'X'*a+f*c+h]*b+g[::-1])

Try it online!

First attempt at golfing, will be improved soon.
a is width, b is height, c is matte width, and d is frame width.

-1 bytes using the := operator to define h as e * d

EXPLANATION:

lambda a,b,c,d,e='#',f='+':          Define a lambda which takes in arguments a, b, c, and d (The width of the painting, the height of the painting, the padding of the matte, and the padding of the frame width, respectively). It also defines variables e and f as '#' and '+', respectively.

    "n".join(                       Turn the list into a string, where each element is separated by newlines

        (g:=                         Define g as (while still evaling the lists)...

            [e*(a+2*c+2*d)]*d+       Form the top rows (the ones filled with hashtags)

            [(h:=e*d)+f*(a+c*2)+h]*c Form the middle-top rows (uses := to golf this section)

        )+

        [h+f*c+'X'*a+f*c+h]*b+       Form the middle row

        g[::-1]                      Uses g to golf the code (forms the entire middle-bottom-to-bottom)

    )

Javascript, 158 bytes

(w,h,m,f)=>(q="repeat",(z=("#"[q](w+2*(m+f)))+`

`)[q](f))+(x=((e="#"[q](f))+(r="+"[q](m))+(t="+"[q](w))+r+e+`

`)[q](m))+(e+r+"X"[q](w)+r+e+`

`)[q](h)+x+z)

Can probably be trimmed down a little bit

f=



(w,h,m,f)=>(q="repeat",(z=("# "[q](w+2*(m+f))+`

`)[q](f))+(x=((e="# "[q](f))+(r="+ "[q](m))+(t="+ "[q](w))+r+e+`

`)[q](m))+(e+r+"X "[q](w)+r+e+`

`)[q](h)+x+z)



console.log(f(3,2,1,2))

Wolfram Language (Mathematica), 152 bytes

(t=(p=Table)["# ",(x=2#4+2#3)+#2,x+#];p[t[[i,j]]="+ ",{j,z=#4+1,#4+2#3+#},{i,z,x-#4+#2}];p[t[[i,j]]="X ",{j,#3+z,#3+#4+#},{i,#3+z,#3+#4+#2}];""<>#&/@t)&

Try it online!