<!doctype html>
<html>
<head>
<title>canvasExample</title>
</head>
<body>
<script type="text/javascript">
var c1 = document.createElement('canvas');
document.body.appendChild(c1);
c1.style.height = "400px";
c1.style.width = "400px";
ctx = c1.getContext('2d');
ctx.fillRect(110, 110, parseInt(c1.style.width), parseInt(c1.style.height));
</script>
</body>
</html>
document.body.appendChild(c1);
ctx.fillRect(110, 110, c1.style.width, c1.style.height)
это ничего не нарисует, т.к. c1.style.width и c1.style.height вернет строку "400px". Приведи к числу ctx.fillRect(110, 110, parseInt(c1.style.width), parseInt(c1.style.height))