Div mit Canvas hat einen seltsamen unteren Rand von 5px

Ich stehe vor einem seltsamen Problem.

kurz:

Wenn wir einen Canvas in ein div setzen und die Größe des Canvas festlegen, ist das div automatisch 5px größer als das Canvas, während ich erwarte, dass es die exakt gleiche Größe erhält.

Diese Frage ist eine Folge von dieser Antwort also werde ich das gleiche beispiel nehmen, das problem wurde in firefox und google chrome reproduziert. (habe andere Browser nicht versucht)

CSS:

Ergebnis (siehe Leerzeichen im div):

Sie können auch genau dieses Beispiel (sehr einfach) in diesem JSfiddle

Warum passiert das und wie können wir das verhindern?