HTML 5 canvas lines appear distorted

Question

I am trying to make a grid on my 500px x 500px canvas:

<canvas id="area" style="width: 500px; height: 500px;"></canvas>


 var canvas = document.getElementById('area');
     var context = canvas.getContext('2d');

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

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

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

The code looks correct to me but for some reason its coming out elongated and pixelated:

http://jsfiddle.net/DK4m7/1/

Would anyone know why this occurring?

user1693593 · Accepted Answer · 2014-04-08 06:51:56Z

5

Avoid using CSS to set the canvas size, do instead:

<canvas id="area" width=500 height=500></canvas>

Using CSS will just stretch the current size of the canvas' bitmap which defaults to 350 x 150 pixels. You need to specifically define the bitmap size using the width and height attributes.

Collectives™ on Stack Overflow

HTML 5 canvas lines appear distorted

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related