previous

page 3

next

Test your grasp of the tute so far by modifying play.html to display a square of side 100 in the centre of the canvas.

Click me for my answer.
...
ctx.beginPath();
ctx.moveTo(100,25);
ctx.lineTo(200,25);
ctx.lineTo(200,125);
ctx.lineTo(100,125);
ctx.lineTo(100,25);
ctx.stroke();
...

You know from my demo on page 1 that we can change the size of the canvas.

My first thought was to use CSS in the usual way. Try changing the style section of play.html to:

#c {
border:1px solid red;
width:45vmin; height:45vmin;
}

So for the first time CSS is unable to deliver what we want. So remove that extra line and try instead this modification to the canvas line:

<canvas id='c' width=45vmin height=45vmin></canvas>

No luck again because HTML doesn't 'know' about vmin - that's a CSS thing! If you replace the 45vmin with 450, you'll find that this works. But of course we're now stuck with size 450!

previous
next