
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.
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;
}
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