I was recently following on the free code camp Javascript Self-Driving Car course and got to about 41:50 without any major issues, but when I got to making the inner road lines dashed, the function ctx.setLineDash([20,20]); just wasn't working. What I had so far was drawing solid lines perfectly fine but when I put that statement in, it wouldn't draw any lines.
I tried to put the line in different places like after the beginPath statement, but nothing was working. Here is the code that I have so far
Road.js
class Road {
constructor(x, width, laneCount = 3) {
this.x = x;
this.width = width;
this.laneCount = laneCount;
this.left = x - width / 2;
this.right = x + width / 2;
const infinity = 1000000000;
this.top = -infinity;
this.bottom = infinity;
}
draw(ctx) {
ctx.lineWidth = 5;
ctx.strokeStyle = "white";
for (let i = 0; i <= this.laneCount; i++) {
const x = lerp(
this.left,
this.right,
i/this.laneCount
)
if (i > 0 && i < this.laneCount) {
ctx.setLineDash([20,20]);
} else {
ctx.setLineDash([])
}
ctx.beginPath();
ctx.moveTo(x, this.top);
ctx.lineTo(x, this.bottom);
ctx.stroke();
}
}
}
function lerp(A, B, t) {
return A + (B-A)*t;
}
main.js
const canvas = document.getElementById("myCanvas");
canvas.height = window.innerHeight;
canvas.width = 200;
const ctx = canvas.getContext("2d");
const road = new Road(canvas.width / 2, canvas.width * 0.9, 4);
animate();
function animate() {
canvas.height = window.innerHeight;
road.draw(ctx);
requestAnimationFrame(animate);
}
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title>Self-Driving Car</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="road.js"></script>
<script src="main.js"></script>
</body>
</html>
Css
body {
margin: 0;
background: darkgrey;
overflow: hidden;
text-align: center;
}
#myCanvas {
background: lightgray;
}
I was recently following on the free code camp Javascript Self-Driving Car course and got to about 41:50 without any major issues, but when I got to making the inner road lines dashed, the function ctx.setLineDash([20,20]); just wasn't working. What I had so far was drawing solid lines perfectly fine but when I put that statement in, it wouldn't draw any lines.
I tried to put the line in different places like after the beginPath statement, but nothing was working. Here is the code that I have so far
Road.js
class Road {
constructor(x, width, laneCount = 3) {
this.x = x;
this.width = width;
this.laneCount = laneCount;
this.left = x - width / 2;
this.right = x + width / 2;
const infinity = 1000000000;
this.top = -infinity;
this.bottom = infinity;
}
draw(ctx) {
ctx.lineWidth = 5;
ctx.strokeStyle = "white";
for (let i = 0; i <= this.laneCount; i++) {
const x = lerp(
this.left,
this.right,
i/this.laneCount
)
if (i > 0 && i < this.laneCount) {
ctx.setLineDash([20,20]);
} else {
ctx.setLineDash([])
}
ctx.beginPath();
ctx.moveTo(x, this.top);
ctx.lineTo(x, this.bottom);
ctx.stroke();
}
}
}
function lerp(A, B, t) {
return A + (B-A)*t;
}
main.js
const canvas = document.getElementById("myCanvas");
canvas.height = window.innerHeight;
canvas.width = 200;
const ctx = canvas.getContext("2d");
const road = new Road(canvas.width / 2, canvas.width * 0.9, 4);
animate();
function animate() {
canvas.height = window.innerHeight;
road.draw(ctx);
requestAnimationFrame(animate);
}
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title>Self-Driving Car</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="road.js"></script>
<script src="main.js"></script>
</body>
</html>
Css
body {
margin: 0;
background: darkgrey;
overflow: hidden;
text-align: center;
}
#myCanvas {
background: lightgray;
}
- How are you using/calling this class and methods? Please edit your question to include a minimal reproducible example. – mykaf Commented 2 days ago
- Does this work? – ResistingGuide4 Commented 2 days ago
- I can see three white dashed vertical lines in the middle of a lightgray road. – mykaf Commented 2 days ago
- That's weird. I copied over the example I made. It still didn't work but ctx.getLineDash() was returning [20,20] – ResistingGuide4 Commented 2 days ago
- Nevermind, got it. The const infinity was too big for it to handle. – ResistingGuide4 Commented 2 days ago
1 Answer
Reset to default 0The constant variable infinity is too large for it to handle. Lowering it to 1,000,000 works fine.