Javascript Canvas绘制混乱？

Question

I am attempting do draw some text over a rectangle, however the text is for some reason being drawn before the rectangle. This doesn't seem to happen when I use another shape such as an arc and happens in both Chromium and Firefox so I don't think it's a browser issue, this is my code:

map_context.fillStyle = "#95609F";
map_context.rect(32,32,192,192);
map_context.fill();

map_context.fillStyle = "white";
map_context.fillText("+", 128, 128);

Answer 1

Try to replace these two lines:

map_context.rect(32,32,192,192);
map_context.fill();

with just:

map_context.fillRect(32,32,192,192);

You probably run this same code in a loop to draw several images but forget to clear the path each time. For paths (such as rect() adds to) you need to use beginPath() , so an optional approach would be:

map_context.beginPath();
map_context.rect(32,32,192,192);
map_context.fill();