Home/ Questions/Q 8203035
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T07:24:11+00:00

This script does not display properly, is there something wrong with it? This has

  • 0

This script does not display properly, is there something wrong with it?

This has missing lines in the display of the browser. I’m using for loops to create a 2-d rectangular coordinate system and would like to know if the code has something wrong with it.

<html>
<head>

<script type="text/javascript">

function start() {

    var winwidth = window.innerWidth;
    var winheight = window.innerHeight;
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    // Sets size of canvas and interior of canvas to window
    ctx.canvas.width = 1200;
    ctx.canvas.height = 600;
    var cname = "ctx";

    // -------------------------------------------
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#ff0000';
    // Origin Y-Axis
    ctx.moveTo(0,300);
    ctx.lineTo(1200,300);
    // Origin X-Axis
    ctx.moveTo(600,0);
    ctx.lineTo(600,600);
    ctx.stroke();
    // -------------------------------------------

    // -------------------------------------------
    ctx.beginPath();
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = '#0000ff';
    majoraxes = new Array();
    j=0;
    // Horizontal Major Axes
    for (hundreth=0; hundreth<7; hundreth++) {
        // Skips past 300
        if (hundreth==3) {
            hundreth=4;
            }
        for (c=0; c<2; c++) {
            if (c==0) {
                majoraxes[j] = cname+".moveTo(0,"+hundreth+"00);";
                j = j+1;
                }
            if (c==1) {
                majoraxes[j] = cname+".lineTo(1200,"+hundreth+"00);";
                j = j+1;
                }
            }
        }
    // Vertical Major Axes
    for (hundreth=0; hundreth<13; hundreth++) {
        // Skips past 600
        if (hundreth==6) {
            hundreth=7;
            }
        for (c=0; c<2; c++) {
            if (c==0) {
                majoraxes[j] = cname+".moveTo("+hundreth+"00,0);";
                j = j+1;
                }
            if (c==1) {
                majoraxes[j] = cname+".lineTo("+hundreth+"00,600);";
                j = j+1;
                }
            }
        }
    for (t=0; t < majoraxes.length; t++) {
        eval(majoraxes[t]);
        }
    ctx.stroke();
    // ---------------------------------------


    // ---------------------------------------
    ctx.beginPath();
    ctx.lineWidth = .2;
    ctx.strokeStyle = '#0000ff';
    minoraxes = new Array();
    j=0;
    // Horizontal Minor Axes
    for (hundreth=0; hundreth<7; hundreth++) {
        for (tenth=1; tenth<10; tenth++) {
            for (c=0; c<2; c++) {
                if (c==0) {
                    minoraxes[j] = cname+".moveTo(0,"+hundreth+""+tenth+"0);";
                    j = j+1;
                    }
                if (c==1) {
                    minoraxes[j] = cname+".lineTo(1200,"+hundreth+""+tenth+"0);";
                    j = j+1;
                    }
                }
            }
        }
    // Vertical Minor Axes
    for (hundreth=0; hundreth<13; hundreth++) {
        for (tenth=1; tenth<10; tenth++) {
            for (c=0; c<2; c++) {
                if (c==0) {
                    minoraxes[j] = cname+".moveTo("+hundreth+""+tenth+"0,0);";
                    j = j+1;
                    }
                if (c==1) {
                    minoraxes[j] = cname+".lineTo("+hundreth+""+tenth+"0,600);";
                    j = j+1;
                    }
                }
            }
        }
    for (t=0; t < minoraxes.length; t++) {
        eval(minoraxes[t]);
        }
    ctx.stroke();
    // --------------------------------------

    }

</script>

<style type="text/css">
html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
}
#myCanvas {
    width:1200;
    height:600;
    image-rendering:optimize-contrast;
}
</style>
</head>
<body onload="start()">

<canvas id="myCanvas" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks like you weren’t drawing enough lines. You can change these in your version to make it work.

    // Horizontal Minor Axes
    for (hundreth=0; hundreth<7; hundreth++) {
        for (tenth=1; tenth<12; tenth++) { // changed to 12

    // Vertical Minor Axes
    for (hundreth=0; hundreth<13; hundreth++) {
        for (tenth=1; tenth<12; tenth++) { // changed to 12

    To be honest though you could really shorten up the code a lot, check this out. I also added in the functionality to make the grid any size you want.

    Working Demo

    Full screen demo

    function start() {
    var winwidth = window.innerWidth;
    var winheight = window.innerHeight;
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    // Sets size of canvas and interior of canvas to window
    var width = 1200,
        height = 600;

    canvas.width = width;
    canvas.height = height;

    var cname = "ctx";

    // -------------------------------------------
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#ff0000';
    // Origin X-Axis
    ctx.moveTo(0,height/2);
    ctx.lineTo(width,height/2);
    // Origin Y-Axis
    ctx.moveTo(width/2,0);
    ctx.lineTo(width/2,height);
    ctx.stroke();
    // -------------------------------------------

    // -------------------------------------------
    ctx.beginPath();
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = '#0000ff';
    majoraxes = new Array();
    j=0;

    for(var hundreth = 0; hundreth < height/100; hundreth++){
        if(hundreth !== (height/2)/100){
            ctx.moveTo(0,hundreth*100);
            ctx.lineTo(width, hundreth*100);
        }
    }

    // Vertical Major Axes
    for (hundreth=0; hundreth < width/100; hundreth++) {
        if(hundreth !== (width/2)/100){
            ctx.moveTo(hundreth*100, 0);
            ctx.lineTo(hundreth*100,height);
        }
    }

    ctx.stroke();
    // ---------------------------------------

    // ---------------------------------------
    ctx.beginPath();
    ctx.lineWidth = .2;
    ctx.strokeStyle = '#0000ff';
    minoraxes = new Array();
    j=0;

     for(var tenth= 0; tenth< height/10; tenth++){
        ctx.moveTo(0,tenth*10);
        ctx.lineTo(width, tenth*10);
    }

    // Vertical Major Axes
    for (tenth=0; tenth< width/10; tenth++) {
        ctx.moveTo(tenth*10, 0);
        ctx.lineTo(tenth*10,height);
    }

    ctx.stroke();
    // --------------------------------------
}

    ​

    • 0