How to Re-Size Your Canvas
Re-sizing a canvas is pretty simple, you only need to add two attributes to your canvas tag, but first we need to make sure you have a canvas to add these attributes to.If you did the previous tutorial this code should look familiar. This code declares a HTML5 document, adds a canvas element to the page, and gives that element a black border to make it more visible. If you were to view this document in your web-browser it should look like this.<!DOCTYPE HTML><html><head><title>HTML5 Canvas Tutorial</title><style type="text/css">#myCanvas {border:1px solid #000000;}</style></head><body><canvas id="myCanvas"></canvas></body></html>
<canvas id="myCanvas" width="500"></canvas>If you view this in your browser, you should get something that looks like this.
Changing the height works the exact same way. For example if you wanted a height of 300 pixels, simply add height="300".
<canvas id="myCanvas" width="500" height="300"></canvas>Your document should now look like this in your browser.
Finished Code
<!DOCTYPE HTML><html><head><title>HTML5 Canvas Tutorial</title><style type="text/css">#myCanvas {border:1px solid #000000;}</style></head><body><canvas id="myCanvas" width="600" height="300"></canvas></body></html>
No comments:
Post a Comment