Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML5 Canvas fit to window
When you view a webpage containing canvas in different screens like that of mobile, pc, desktop or tablet, the size of the screen changes each time. So, it is necessary that the canvas resizes itself according to the screen for better user experience.
In this article, we will learn how to resize an HTML5 canvas to fit the window.
Let us first understand more about HTML5.
HTML5
HTML (Hyper Text Markup Language) is a standard markup language for web pages. Using HTML, you can create your own website.
HTML5 is the updated version of HTML with advanced technology used in it. It was developed to culminate the compatibility issues with the new browsers and to introduce certain new functionalities like multi-platform compatibility, more page layout options with help of header, section, article tags etc., using the markup language.
One of the great achievements of HTML5 developers is that it supports multimedia i.e., both video and audio on mobile devices. New features were introduced to support this, such as video, audio and canvas tags. Also, HTML5 supports javascript codes to run directly on the browser.
What is HTML5 Canvas?
Basically, canvas is rectangular enclosed area in a web page. By default, it has no border and content. The canvas element of HTML5 enables the user to draw dynamic 2D graphics and adding pictures on web page using javascript. It is represented by <canvas> tag. This element is supported by Chrome, Safari, Internet explorer, Firefox as well as Opera.
By default, the canvas element has height of 150px and width of 300px. According to your need, you can customize its size and border using CSS.
Syntax
<canvas id= “” ></canvas>
Example
<html> <body> <canvas id= “demo” height= “170” width = ”260” style = “ border: 2px solid #000000;” ></canvas> </body> </html>
In the code,
Height and width specifies the height and width of the canvas respectively. It can have the various values like auto (assigned by browser), length ( px, cm , mm etc.), initial (default value) and inherit (inherited values from its parent element).
Example
height of 49px and width of 90%. style = “ border : 2px solid #000000;”
The border property of CSS allows the users to specify kind of border to be displayed using width, height, style, color, etc.
Border- style has various values like solid, dotted, double, none, hidden, inset etc.
In the above code, 2px is the border width, solid is the border- style while #000000 is the hex color code for black.
A hex color code is an alphanumeric code for specifying the color in on the World Wide Web. Each color has its unique hex color code. Eg. #FFFFFF for white, #0000FF for blue, #FF0000 for red, #FFFF00 for yellow etc.
Resizing HTML5 canvas to fit window
In this section, we will take a look at a few methods to resize HTML5 canvas to fit window.
Method 1: Using CSS
In order to make the canvas fill the window, you can adjust the size of it with CSS.
Example
<html> <style> body { height : 100%; width : 100%; } canvas { background-color: #ffff00; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; } </style> <body> <canvas> </canvas> </body>
A yellow canvas will be displayed which fills the whole screen.
In the above program,
Width and height of canvas is set to 100%. Position is absolute and top, left, right, and bottom are “0” in order make the canvas fit the window.
Also, the body elements fill the window by assigning their height and width value to 100%.
Method 2: using javascript
Example
<html> <style> body { width: 100%; height: 100%; overflow: hidden; display: block; } </style> <body> <script> (function() { var myCanvas = document.getElementById(‘demo’) // refering to the canvas using its id var content = myCanvas.getContext('2d'); function start() { screen.addEventListener('resize', fitCanvas, false); fitCanvas(); // initial canvas border } function resize() { content.strokeStyle = 'red'; content.lineWidth = '10’; content.strokeRect(0, 0, screen.innerWidth, screen.innerHeight); } function fitCanvas() { myCanvas.width = screen.innerWidth; myCanvas.height = screen.innerHeight; resize(); } })(); </script> <canvas id='demo' style='position: absolute; right :0px; bottom : 0px;'></canvas> </body> </html>
A blue bordered canvas is displayed which fits the window.
Here,
Overflow − hidden is used for making the extra contents of an element clipped which makes the rest of the content to be hidden.
Display − block is used to display any element in form block element like <p>, <h2> etc. It has whitespace above and below it.
getContext − is used for obtaining graphics context on the canvas element.
screen.addEventListener('resize', fitCanvas, false); − This block of code enables the user to make an event Listener which will call the fitCanvas function every time there is change in the size of screen
resize() − is used to add style to the canvas. Here, it has red color, 10 pixel border which resizes itself along with the window.
Each time the window changes its size, the canvas according changes its dimension to fit into it.
Conclusion
HTML5 canvas can be resized i.e change in its dimensions, in order to fit the whole screen accordingly. It can be done with use of Javascript or CSS.
9K+ Views
