0

I'm injecting an element onto the body of my HTML from the script using document.body.insertAdjacentHTML. Once I do it the element pops up but is at the very top of the page, the method only has 4 different positions to choose from so I want to know how to change the position of the element or at least how to used position: fixed on it cause its not working right now.

document.body.insertAdjacentHTML('afterbegin', `<canvas id="canvas" 
                  style=
                  "
                  border-radius:10px;
                  width:600px;
                  height:300px;
                  position:fixed;
                  top:100px;
                  text-align:center;
                  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
                  ">
                  </canvas>`);
Barmar
  • 741,623
  • 53
  • 500
  • 612
Hitman DD
  • 47
  • 1
  • 11
  • I converted your question to a Stack Snippet. When I run it, the canvas is located 100 pixels from the top, just like it should be. – Barmar Nov 23 '21 at 19:35
  • Not exactly related to the question, but don't size a canvas with CSS/style properties, use the `width` and `height` attributes of the canvas instead. – Teemu Nov 23 '21 at 19:52
  • @Teemu how come though? – Hitman DD Nov 23 '21 at 22:30
  • The drawing area is still in the default size, 300x150, setting the CSS of the size just stretches the pixels of the canvas, and the content becomes blurry. – Teemu Nov 24 '21 at 06:04

0 Answers0