CODEWITHSUNDEEP
javascript
user13129599
user13129599

Reputation:

Width and height through javascript not working?

I'm making a javascript bookmarklet that allows you to draw on the page. When you scroll, the drawings stay where they are. (I have my reasons). It appends a canvas with (in the test phase) a red background. I created two variables, width and height, that are the screen width and height.

var c = document.createElement("canvas");
var w = screen.width;
var h = screen.height;
c.setAttribute("id", "canvas");
c.setAttribute("style", "position: fixed; z-index: 1000000; top: 0%; left: 0%; background-color:         
red; width: " + w + "; height: " + h + ";");
console.log(w + ", " + h)
document.body.appendChild(c)

It only seems to be appearing in the corner as default size. Thanks in advance!

Upvotes: 0

Views: 37

Answers (2)

Brilliand
Brilliand

Reputation: 13714

CSS width and height need units:

c.setAttribute("style", "position: fixed; z-index: 1000000; top: 0%; left: 0%; background-color:         
red; width: " + w + "px; height: " + h + "px;");

Upvotes: 3

Tamas Szoke
Tamas Szoke

Reputation: 5542

You forgot to add px for the width and height:

var c = document.createElement("canvas");
var w = screen.width;
var h = screen.height;
c.setAttribute("id", "canvas");
c.setAttribute("style", "position: fixed; z-index: 1000000; top: 0%; left: 0%; background-color: red; width: " + w + "px; height: " + h + "px;");
console.log(w + ", " + h)
document.body.appendChild(c)

Upvotes: 0

Related Questions