tags:

views:

90

answers:

4
+2  Q: 

How do I make a canvas drawing to completely fill the browser?

Here's the code I currently have.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<script src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt; 
<script>
function draw()
{
    var diagCanvas = document.getElementById("diag-cnvs");

diagCanvas.height=window.innerHeight;
diagCanvas.width=window.innerWidth;

    if (diagCanvas.getContext)
    {
        var ctx = diagCanvas.getContext("2d");
        var h = w = 100;
        var color1 = 'rgba(255,0,0,1)';
        var color2 = 'rgba(255,0,0,.2)';
        var x = y = 0;

        while(y<diagCanvas.height)
        {
            while(x<diagCanvas.width)
            {
                ctx.fillStyle = color2;
                ctx.fillRect( x, y, w, h);

                ctx.fillStyle = color1;
                ctx.lineTo( x, y);
                ctx.lineTo( x+w/2, y);
                ctx.lineTo( x, y+h/2);
                ctx.lineTo( x, y);
                ctx.moveTo( x+w, y);
                ctx.lineTo( x+w, y+h/2);
                ctx.lineTo( x+w/2, y+h);
                ctx.lineTo( x, y+h);
                ctx.fill();
                ctx.closePath();

                x+=w;
            }
            y+=h;
            x=0;
        }
    }
}
$(function() {
    draw();
})
</script>
<style>
    canvas {
    position: absolute;
    top: 0;
    left: 0;
}
</style>
</head>
<body>
<canvas height="100" width="100" id="diag-cnvs"></canvas>
</body>
</html>

I'd like to keep the height and width dimensions the same for the canvas shape but it'd be great to have this completely fill the browser 100% or basically repeat indefinitely, similar to the CSS value for a background-image to repeat on both x and y axis.

Eventually, I'd like to add two or three more colors to the stripes, but I only vaguely understand what's going on in this code since I'm brand new to it.

A: 

Are you adding this canvas to the body element of the page? Also, you could try

position: absolute; top: 0px; left: 0px;

Robbert  2010-07-07 09:01:53
Sure, that helps position the little box but doesn't actually expand it to an indefinite width and height.
Micah  2010-07-07 09:03:08
obviously. but in combination with the height and width of 100% it should work... assuming the element is directly in the body tag. Correct me if I'm wrong though.
Robbert  2010-07-07 09:13:09
Adding 100% width and height adds nothing to this equation. Even if it did stretch the canvas element, the lines are being drawn by JS. I'm suspecting that I will have to do a redraw of some kind using JS but I have on clue what to do and how to add it to the code above.
Micah  2010-07-07 09:20:05
A: 

using css:

#diag-cnvs{
    position: absolute;
    top:      0px;
    left:     0px;
    right:    0px;
    bottom:   0px;
    width:    100%;
    height:   100%;
}
davyM  2010-07-07 09:20:02
Doesn't work, already tried this.
Micah  2010-07-07 09:20:48
See this code snippet:http://pastebin.com/jmuSqvJ3 .Since IE6, IE7 and IE8 don't support the canvas tag, you should download explorercanvas.js from http://code.google.com/p/explorercanvas/ .I tested the snippet on firefox 3.5.5, chrome 6.0.453.1 and IE7 on windows xp, it does work.If it doesn't work for you , please describe what isn't working and which OS and browser you use.
davyM  2010-07-07 11:49:32
*Edit: I checked without resizing, and see what you mean. I am looking how to fix this.
davyM  2010-07-07 12:01:48
i checked some things: the canvas is stretched like you want. But the drawing result seems to differ. I don't know wether that is because of strange behaviour of the canvas /browser, or because the canvas drawing code contains some bad code.
davyM  2010-07-07 12:19:07
A: 

This should be possible, I've done it with a Canvas, though the code is at home and I'm at work so I'll take a stab at what it should be. One thing to point out, if you want it to maintain the correct aspect ratio of the image/canvas then you need to use JavaScript (well I couldn't figure it out, someone enlighten me), otherwise you can use pure CSS:

... header (snip) ...
</head>
<body>
    <div id="Page">
        <canvas id="MyCanvas" width="500" height="500"></canvas>
    </div>
</body>
</html>

And CSS:

body { width: 100%; height: 100%; }
#Page { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

#MyCanvas { height: 100%; width: 100%; }

If that doesn't work try changing #MyCanvas to

#MyCanvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

I'm sure it's something to that effect, I have got this working, I'll double check my code when I get home from work.

Sunday Ironfoot  2010-07-07 11:20:15
+2  A:  
function draw()
{
    var diagCanvas = document.getElementById("diag-cnvs");

    if(document.documentElement.offsetHeight<window.innerHeight)
           diagCanvas.height = window.innerHeight;
    else
           diagCanvas.width = document.documentElement.offsetHeight;
    diagCanvas.width=document.documentElement.offsetWidth;

    if (diagCanvas.getContext)
    {
        var ctx = diagCanvas.getContext("2d");
        var h = w = 100;
        var color1 = 'rgba(255,0,0,1)';
        var color2 = 'rgba(255,0,0,.2)';
        var x = y = 0;

        while(y<diagCanvas.height)
        {
            while(x<diagCanvas.width)
            {
                ctx.fillStyle = color2;
                ctx.fillRect( x, y, w, h);

                ctx.fillStyle = color1;
                ctx.lineTo( x, y);
                ctx.lineTo( x+w/2, y);
                ctx.lineTo( x, y+h/2);
                ctx.lineTo( x, y);
                ctx.moveTo( x+w, y);
                ctx.lineTo( x+w, y+h/2);
                ctx.lineTo( x+w/2, y+h);
                ctx.lineTo( x, y+h);
                ctx.fill();
                ctx.closePath();

                x+=w;
            }
            y+=h;
            x=0;
        }
    }
}
JaKoPo  2010-07-07 13:46:59
With a Canvas it's possible to set the physical/viewable size and the virtual size independently, eg. draw onto a 500x500 canvas that's been set to fill a 1280x768 screen, but the actual canvas still remains at 500x500. I think this is what Micah is trying to do, hence why this solution wouldn't really work.
Sunday Ironfoot  2010-07-07 14:23:50
From what he wrote, he is traying to fill the background of the page drawing a pattern through his code, but if you try to stretch the canvas after drawn it the image will be stretched too; the specs of the canvas element doesn't mention anything about physical or viewvable size, so or you make a loop like the one i posted or you can save the image pixels and drawing them in the loop.
JaKoPo  2010-07-07 16:19:37
@JaKoPo Nice solution. However, to make it absolutely complete (no pun intended), you need to add the css to position the canvas absolutely in the top left corner (or remove the margins/padding from the body).
Adam  2010-07-07 22:27:59
Wow, awesome! This is the solution I am looking for!! Thank you, JaKoPo!The only question I want to follow up with is how to make it infinite beyond the browser's border. Is that even possible? The reason I'm asking is if I do any animation, you will see the bg color as the canvas element animates.
Micah  2010-07-08 00:24:55
I edited the line 5/6 so it will match the size of the page and not browser window. Of course as Adam said above, you should remove the border of the body or make the position of the canvas absolute.
JaKoPo  2010-07-08 07:12:47
Hmm, that didn't work as intended. With the position of the canvas absolute already (and verifying that it worked correctly), I changed lines 5 and 6 to your edited code. Once I reloaded the page, it then had a 20px-ish height from left to right across the whole browser window. The rest of the document shows the background color (whether specified in document's css or browser's default css). Anyway, modified code didn't produce indefinite width/height for canvas element using modified code.
Micah  2010-07-08 08:23:30
I think that happens because your body height is 20px, it happened to me and i don't know why it does that. I edited again those two lines so it takes the bigger height between window height and page height.
JaKoPo  2010-07-08 08:48:55
Hey, you are amazing for all this effort. I really appreciate it. I have updated the code with everything on my HTML document so you can see what I'm working with and this includes the latest version of your code which doesn't work.
Micah  2010-07-08 09:41:45
Ops, i didn't notice i made a mistake, it should be "diagCanvas,height", not diagCanvas.
JaKoPo  2010-07-08 15:55:40
Cool, yeah that produces the same result as using just diagCanvas.height=window.innerHeight and diagCanvas.width=window.innerWidth, there's no difference.
Micah  2010-07-08 19:03:48

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript