0

I will draw in a canvas element a grid. For this I use the moveTo and lineTo method. When the canvas element has to inline styling like in this project the grid is incorrect: jsfiddle.net/yzL4ruhf/

When there is an inline styling in the canvas element it's correct. ( jsfiddle.net/7w4qvyfa/4/ )

Can someone explain the difference? Thanks!

M. Noelle
  • 1

2 Answers2

0

By default, the canvas context has a size of 300x150 pixels. 1

You can think of the canvas like an image with a fixed size. If you scale up an image by setting width and height in CSS it will become pixelated and blurry. Same thing happens with the canvas.

By setting the width and height attributes on the canvas element itself you are actually telling it to use a larger context and thereby creating a bigger image, and so it does not get blurry and pixelated.

If you wish to avoid setting those attributes in your HTML code, you can set them in javascript instead:

context.canvas.width = 501;
context.canvas.height = 381;
Splashdust
  • 787
  • 5
  • 8
-1

Check this answer, So you'll have to use width/height attributes or can do it using javascript like that.

  c_canvas.width  = 501;
  c_canvas.height = 381;
abdallah Nofal
  • 1,077
  • 8
  • 13