javascript - Canvas: Draw Lines on top of Filled Rectangle -

i have function here that's supposed draw square , plus sign in middle, reverse colors if mouse on it. works fine if mouse not on top, once filled, plus sign disappears. assume it's being covered up.

function drawadd(cx, cy, btnw, btnh, mouse) {     var getid = document.getelementbyid("canvas_1");     var color = "black";     var px = cx + btnw/2;     var py = cy + btnh/2;      if (getid.getcontext)     {         var ctx = getid.getcontext("2d");          ctx.clearrect(cx, cy, btnw, btnh);         ctx.linewidth = "10";         ctx.fillstyle = "black";          if(mouse)         {             ctx.fillrect(cx, cy, btnw, btnh);             color = "white";         }         else         {             ctx.strokerect(cx, cy, btnw, btnh);         }          ctx.beginpath();         ctx.linewidth = "20";         ctx.fillstyle = color;         ctx.moveto(px - 40, py);         ctx.lineto(px + 40, py);         ctx.moveto(px, py - 40);         ctx.lineto(px, py + 40);         ctx.stroke();         ctx.closepath();     } } 

what doing wrong here?

you need replace ctx.fillstyle = color ctx.strokestyle = color line color set strokestyle, not fillstyle.

here's working jsfiddle.