Cannot draw on canvas

Question

I have been trying to insert a canvas on top of some pages, but for some pages it doesn't work. It seems to be me that there is something clearing all canvases on the page, but I couldn't find any calls to .clearRect anywhere in the code on the page.

canvas = document.createElement('canvas');
canvas.width = document.width;
canvas.height = document.height;

canvas.style['z-index'] = 999;
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 1000, 1000);

A page with the problem is: http://www.nrk.no/sognogfjordane/helse-forde-har-ikkje-full-oversikt-1.11166801

If you run the same code on this page it should work. Expected result is a huge black square on the page.

I don't understand how a script can block the use of an inserted canvas on the page.

I am using Chrome.

* EDIT *

The problem is not that I use the deprecated document.width/heightcalls, but that I wasn't aware that canvas has a maximum size: Maximum size of a <canvas> element

How and where are you inserting this piece of code? I dumped it into the console and it's working fine for me (Chrome) — dan-lee, Aug 05 '13 at 16:45

score 4 · Answer 1 · answered Aug 05 '13 at 16:48

4

Because document.width and document.height are undefined, so your canvas width and height are 0 and 0.

Instead try something like:

canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvas.style['z-index'] = 999;
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 1000, 1000);

And you'll see it just fine.

See notes on the MDN. Specifically:

Starting in Gecko 6.0, document.width is no longer supported. Instead, use document.body.clientWidth.

answered Aug 05 '13 at 16:48

Simon Sarris

62,212
13
141
171

Thank you. This works, but I don't understand why my code will work on some pages, but not on others. – ljos Aug 05 '13 at 17:05
On second thought, this does not do the same as I want. I want a canvas that covers the entire body of the page, but that exceeds the maximum canvas size on some pages. See http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element – ljos Aug 05 '13 at 17:41

Deepak Biswal · Answer 2 · 2013-08-05T17:01:15.117

0

Please look into the demo.

canvas = document.createElement('canvas');
canvas.width = document.width;
canvas.height = document.height;

canvas.style['z-index'] = 999;
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 1000, 1000);

I think this is what you needed. If you need something else then please exaplin or put your code in jsfiddle. Here in this demo it is creating canvas element.

edited Aug 05 '13 at 17:01

answered Aug 05 '13 at 16:52

Deepak Biswal

4,280
2
20
37

If you want specific width and height then you have to specified `document.width` and `document.height` else it will packed the window. – Deepak Biswal Aug 05 '13 at 17:03

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

I first thought Simon Sarris was correct, but in the end that didn't do what I wanted. What I want is a that covers the entire page.

I discovered through Maximum size of a <canvas> element that I was exceeding the limits of canvas.

edited May 23 '17 at 10:25

Community

1
1

answered Aug 05 '13 at 18:48

ljos

315
3
9

Cannot draw on canvas

3 Answers3