CODEWITHSUNDEEP
htmlcanvasgrid
user1032497
user1032497

Reputation: 21

HTML5 Canvas Grid not rendering

This question is extremely rudimentary but I'm just starting out with "HTML5 Up and Running" and can't seem to get my canvas grid to render. Below is the code. Thanks for your help.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas | HTML5</title>
<style type="text/css">
#c {border:1px solid #000;}
</style>
<script type="text/javascript">


function draw_grid() {
    var c_canvas = document.getElementById("c");
    var context = c_canvas.getContext("2d");

    for (var x = 0.5; x < 500; x += 10) {
    context.moveTo(x, 0);
    context.lineTo(x, 375);
    }

    for (var y = 0.5; y < 375; y += 10) {
    context.moveTo(0, y);
    context.lineTo(500, y);
    }

    context.strokeStyle = "#eee";
    context.stroke();
}
draw_grid();


</script>

</head>

<body>
<canvas id="c" width="300" height="225"></canvas>
</body>
</html>

Upvotes: 2

Views: 898

Answers (2)

Daniel
Daniel

Reputation: 9829

I just launched a project on GitHub for this issue. It's called grid.js.

You do not have to worry about drawing a grid. Maybe you will give it a try.

Upvotes: 1

meo
meo

Reputation: 31249

your HTML is not ready when you JS gets executed...

Put you script tag after the canvas, and it should work:

http://jsfiddle.net/vQE3f/1/

In your code when JS is executing document.getElementById("c"); the browser don't know that there is a canvas with a id C,,,

Upvotes: 3

Related Questions