
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
Is it possible to have an HTML canvas element in the background of my page?
In this article we are going to learn about is it possible to have an HTML canvas element in the background of my page.
You might try adding a CSS style with a position: fixed (or absolute, if applicable) to the canvas so that any material that comes after it will sit on top of it.
To get better understanding on is it possible to have an HTML canvas element in the background of my page, let’s look into the following examples…
Example 1
In the following example we are using the position: absolute to apply CSS style to the canvas.
<!DOCTYPE html> <html> <style> canvas{ position:absolute; left:0; top:0; z-index:-1; } div{ position:absolute; z-index:0; left:11px; top:14px; } </style> <body> <canvas id="mytutorial" width="450" height="500" style="border:1px solid #ABEBC6;"></canvas> <div>Welcome To Tutorialspoint</div> <script> var c = document.getElementById("mytutorial"); var ctx = c.getContext("2d"); var grd = ctx.createLinearGradient(0, 0, 600, 600); grd.addColorStop(0, "#D35400"); grd.addColorStop(1, "#73C6B6"); ctx.fillStyle = grd; ctx.fillRect(0, 0, 600, 600) </script> </body> </html>
On running the above script, the output window pops up, displaying the canvas as the background with the text “welcome to tutorialspoint” on the webpage.
Example 2
Let’s consider the another example for having an HTML canvas element in the background of my page.
<!DOCTYPE html> <html> <style> body { background: #dddddd; } #tutorial { margin: 20px; padding: 20px; background: #ffffff; border: thin inset #aaaaaa; width: 600px; height: 300px; } </style> <body> <canvas id='tutorial'></canvas> <script> var canvas = document.getElementById('tutorial'), context = canvas.getContext('2d'); context.font = '38pt arial'; context.strokeStyle = '#82E0AA'; context.strokeText('Welcome', canvas.width/2 - 150, canvas.height/2 + 15 ); </script> </body> </html>
On running the above script, it will generate an output consisting of stroke text filled on the canvas displayed on the webpage, acting as a background to the page.
- Related Articles
- How to display the background color of an element in HTML?
- Is it possible for the atom of an element to have one electron, one proton and no neutron. If so, name the element.
- How to add an element horizontally in HTML page using JavaScript?
- Is it possible to have a HTML SELECT/OPTION value as NULL using PHP?
- How to completely fill web page with HTML canvas?
- Is it possible to change the HTML content in JavaScript?
- Does ID have to be unique in the whole HTML page?
- Is it possible to predict the occurrence of an earthquake?
- Is it possible to have a function-based index in MySQL?
- Find if it's possible to rotate the page by an angle or not in C++
- How to specify that an element should be pre-selected when the page loads in HTML?
- Splitting up an HTML page and loading it through header?
- Is it possible to have View and table with the same name in MySQL?
- Is it possible to have JavaScript split() start at index 1?
- Is it possible to resize an array in C#
