The <div> element is not compatible with the <canvas> element for use

I'm having trouble inserting a <canvas> animation within a <div> element. The current code displays the animation across the entire page, but I would like to contain it within a single section, like this: <div><canvas> </canvas></div>

HTML:
<canvas></canvas>
<h2>hi</h2>
CSS:
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    font-family: 'Poppins', sans-serif;
    background-color: #121212;
    display: flex;
    align-items: center;
    justify-content: center;
}

canvas {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

h2 {
    font-size: 80px;
    color: white;
    position: relative;
  
}

Answer №1

Surround the canvas with a position:relative div. Adjust the canvas positioning to be absolute instead of fixed, using the div frame as a point of reference.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  font-family: 'Poppins', sans-serif;
  background-color: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(255, 0, 0, 0.3);
  top: 0;
  left: 0;
  z-index: 0;
}

h2 {
  font-size: 80px;
  color: white;
  position: relative;
}

.my-canvas {
  position: relative;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
<div class="my-canvas">
  <canvas></canvas>
  <h2>hi</h2>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery dynamic fields vanish mysteriously after being validated

I am facing an issue with my jQuery and validation. Below is the code snippet causing the problem: var fielddd = 1; $(document).on('click', '.btn.add-field', function() { fielddd++; $('#newfield').append('< ...

Utilize VueJS to bind a flat array to a v-model through the selection of multiple checkboxes

My Vue component includes checkboxes that have an array of items as their value: <div v-for="group in groups"> <input type="checkbox" v-model="selected" :value="group"> <template v-for="item in group"> <input type ...

Simulating a JavaScript constructor using Sinon.JS

I need to write unit tests for the ES6 class below: // service.js const InternalService = require('internal-service'); class Service { constructor(args) { this.internalService = new InternalService(args); } getData(args) { let ...

The clipPath feature in webkit fails to display correctly

After reading this insightful article, I decided to experiment with applying a gradient clip-path to a simple shape (an O letter converted to curves). To my frustration, the technique worked perfectly in Firefox but failed to render anything in webkit bro ...

Interested in mastering BootStrap for Angularjs?

As a PHP developer with a newfound interest in JavaScript, I took it upon myself to learn AngularJS and jQuery. However, I recently discovered that simply mastering Angular is not enough - Bootstrap is also necessary. My only issue is my fear of CSS; handl ...

Incorporate Symfony form action into your project

Recently, I set up a page with tabs using bootstrap and each tab contains its own form. Fortunately, everything is functioning perfectly except for one issue - handling form errors. I am trying to figure out how to automatically navigate to the tab where t ...

What could be causing the issue with export default not functioning as expected in this straightforward code?

Whenever I try using export default in the index.js module, it gives me an error message saying: "export 'appReducers' (imported as 'appReducers') was not found in './reducers/index' (possible exports: default). However, when ...

Generating a Random CSS Class in JavaScript with Math.random() Function

I'm currently enrolled in a Basic HTML/Javascript course and I'm struggling with how to "modify the following JavaScript so that it picks one of the style classes at random each time it is called." The code provided below is functional, but lacks ...

Aligning container divs at the center in various screen resolutions

I recently constructed a portfolio website using Bootstrap and Isotope JS. In my layout, I have a container div which works perfectly when viewed on a desktop browser - displaying 3 divs in one line. However, the issue arises when the resolution changes an ...

AngularJS: Sending form data to an external server results in an error due to restricted URI access

I am currently diving into the world of AngularJs and putting effort into mastering it. In this process, I've created a demo application that attempts to send form data to a localhost site. The code for this endeavor is provided below. index.html &l ...

Turn the flipcard hover effect into an onclick action

After successfully creating interactive flip cards using CSS hover effects, I am now faced with the challenge of adapting them for mobile devices. I'm struggling to figure out how to translate my hover effects into onclick events for a mobile-friendl ...

Grammarly is seamlessly inserting padding into my body element

After setting up my website on GitHub, I ran into an issue where the Grammarly Chrome extension was automatically adding a padding-top attribute to the body tag. <body data-new-gr-c-s-check-loaded="14.1028.0" data-gr-ext-installed="" ...

Insert HTML elements into nested CSS classes

My goal is to utilize jQuery for looping through classes and adding text to an HTML element. I am currently working with the following example HTML: <div class="question"> <div class="title"> <strong>Here's the question ...

No overflow is occurring within the DIV element

This code snippet is fully functional on all browsers except for IE. Unfortunately, the overflow feature does not seem to be working correctly. Any assistance would be greatly appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ...

Using jQuery to detect changes in the value of form fields, excluding any changes related to display toggles

Currently, I am in the process of revamping a large form that includes various input fields and dropdown menus. The goal is to submit it via AJAX once a field loses focus but only if the value has been altered. To achieve this, I have set up a jQuery selec ...

Property float does not account for margin values

Currently delving into the world of the semantic-ui framework, I have been working with segments. Here is a snippet of my code: <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery ...

React - Pagination with page number not functioning correctly

Currently, I am trying to set up pagination for my website. When I visit localhost:3000/profile/, it displays the first 3 elements correctly. The pagination also functions properly when I input a number like 3 for ${page}, taking me to page 3 seamlessly. H ...

Input information into the system from the successful response found on a different page

After receiving my ajax response successfully, I want to redirect to a new aspx page where there are 30 input type text controls. My goal is to populate all the values in those controls. How can I achieve this? Any suggestions? This is what I have attempt ...

How to programmatically unselect an ng-checkbox in AngularJS when it is removed from an array

Utilizing checkboxes to gather values and store them in an array for dataset filtering purposes. The objectives are as follows: Show child filters when parent category is selected. Unselect all children if parent is unselected (otherwise they will ...

Ways to increase the font size of input text using bootstrap's css framework

I currently have a bootstrap textbox set up like this: <input type="text" class="span9" required name="input_text"/> My goal is to increase the height of my input box to 300px. The width, on the other hand, is being handled by span9. I utilized In ...