0

function Start() {
     DrawViewDist();
     DrawFoV();
    }
    
    function DrawFoV() {
     var c = document.getElementById("roomCanvas1");
     var ctx = c.getContext("2d");
     ctx.strokeStyle = "#f0f";
     ctx.lineWidth=1;
     ctx.beginPath();
     ctx.moveTo(150, 113);
     ctx.lineTo(123,16);
     ctx.stroke();
     ctx.beginPath();
     ctx.moveTo(150, 113);
     ctx.lineTo(175,16);
     ctx.stroke();
    }
    
    function DrawViewDist() {
     var c = document.getElementById("roomCanvas1");
     var ctx = c.getContext("2d");
     ctx.strokeStyle = "#ff0";
     ctx.lineWidth=1;
     ctx.beginPath();
     ctx.moveTo(150, 113);
     ctx.lineTo(150,16);
     ctx.stroke();
     ctx.beginPath();
     ctx.moveTo(1, 1);
     ctx.lineTo(299,149);
     ctx.stroke();
    }
body {
  background-color: #802828;
  color: #fff;
}

#roomCanvas1 {
  height: 600px;
  width: 800px;
  padding: 0;
  border: 1px solid #0f0;
}
<!DOCTYPE html>
<html>

  <head>
    <title>Canvas Test</title>
  </head>

  <body onload="Start()">
    <div id="main">
      <canvas id="roomCanvas1">Your browser does not support HTML5 canvas drawings.</canvas>
    </div>
  </body>

</html>

I'm trying to draw lines using a canvas. The canvas is set to 800x600 and I have a 1 px border around it so I can see that it really IS 800x600 - but when I try to draw the lines, I have to pretend that the canvas is 300x150 in order to have the lines start/end in the right places. On top of that, the lines are much thicker than they should be - and they're blurry! I started with the code from W3Schools and just modified it. Everything works fine (using the same browser) in their TryIt editor so I can't imagine what the problem is.

lucascaro
  • 16,550
  • 4
  • 37
  • 47
QuantiumTech
  • 13
  • 4

1 Answers1

0

This is a common problem that I have had in the past. Just set the canvas.width = 800 and canvas.height = 600. The canvas's height and width are naturally 150 and 300. When you change the canvas's height and width in html/css, it doesn't change js. you have to specify in the js that there was a change. Hope this helps

Electrox Mortem
  • 319
  • 2
  • 15