Home/ Questions/Q 905577
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T16:14:40+00:00

Here’s the code I currently have. <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8/>

  • 0

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"></script> 
<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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    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;
        }
    }
}
    • 0