CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
catastrophiat
catastrophiat

Reputation: 3

Very basic HTML5 Canvas code failing to run. Is this me or my browser?

I am trying to learn to use HTML5 Canvas for a project, and just started using an online tutorial (a beautifully written one actually, here is the link: http://diveintohtml5.info/canvas.html). However as soon as I started to replicate it, it is not working. My browser is the latest release of Chrome, JavaScript is on, etc. I am working in Visual Studio, but this is also failing to work on JSFiddle and my simple text editor.

Here is what is in the body of the HTML file:

<canvas id="c" height="500" width="375"></canvas>


<script src="CanvasTest.js"></script>

And here is the JavaScript:

document.addEventListener('DOMContentLoaded', domloaded, false);
function domloaded() {
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');

    context.beginPath();

    // Draw vertical lines
    for (var x = .5; x < 500; x += 10) {
        context.moveTo(x, 0);
        context.lineTo(x, 375);
    }

    // Draw horizontal lines
    for (let y = .5; y < 375; y += 10) {
        context.moveTo(0, y);
        context.lineTo(500, y);
    }

    context.strokeStyle = "#00000";
    context.stroke();
}

Upvotes: 0

Views: 79

Answers (2)

Henry Zhu
Henry Zhu

Reputation: 2618

You put let instead of var in your for loop.

Upvotes: 1

Ben
Ben

Reputation: 1568

You are using an ES6 feature let, change that to var.

Here's an example on JS Bin.

Upvotes: 1

Related Questions