Canvas and text cut off

[AdamLink]

I'm new to Javascript (but not programming). So I'm using w3schools.com to learn.
Adapting one of the examples, I created the code in the attached file for experimenting and testing.

However, it cuts off the rectangle and text. The code draws three rectangles each 1 pixel longer to test where the cut off occurs. It's at 146 pixels.

I tried varying:
html, body {
<canvas id='timecol' style = 'position: absolute; left: 0px; top: 0px;' ></canvas>
strokeRect(x, y, boxWidth,boxHeight)
etc.

When tested on w3schools.com, Firefox, IE11 and Access web browser control, all give the same results.

Obviously, I'm missing something, but several hours of searching and head scratching have yielded no answers.

Can anyone tell me what's wrong?

Thanks.

 

[ChrisHirst]

I would that this

timeBox.strokeRect(5, 5, 40, 146);

is the most probable culprit




Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

 

[AdamLink]

After a bit more searching, the problem is here:

<canvas id='timecol' style = 'position: absolute; left: 0px; top: 0px;' ></canvas>

When I changed it to:

<canvas id='timecol' width='200px' height='1200px' ></canvas>

It worked.

It appears the canvas syntax is critical.