Fullscreen low resolution canvas

Question

I reviewed the questions here and followed the answers, but my canvas still has a low resolution:

CSS

#canvas { position: absolute; top: 0; left: 0; z-index: -1; } 

JS: Initialize Canvas (once upon page load and again when the window is resized)

 function initCanvas() { $('#canvas').width($(window).width()); $('#canvas').height($(window).height()); } 

Line drawing with

 var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); 

Result

Jsfiddle

You can see that the string is displayed in low resolution. I would like the canvas to be a full window, but it looks sharp.

NB: I use absolute position and z-index -1 for the canvas, because I would like it to appear behind something else, which I later add to the page.

Answer 1

try it

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

We cannot set the width and height of the canvas element using css, as it will not display correctly, as the document says. You have to install it

or you should use

 function initCanvas() { $('#canvas').attr("width",$(window).width()); $('#canvas').attr("height",$(window).height()); } 

Demo

Answer 2

There are two separate width / height values ​​for a canvas:

• An element whose size is determined by a style or css element. These sizes are used to render the element inside the document.
• An area of ​​the canvas whose size is determined by the width and height properties of the element. These sizes are used to draw on the canvas through its context.

You successfully resize an element using the jQuery width() and height() methods, which are short for changing element.style.width and element.style.height .

All you are missing is setting the canvas area, which is a property of the canvas element. You can do this with the jQuery prop() method:

 $('#canvas').prop({ width: x, height: y }); 

Or, if you want to do everything at once:

 var dimensions = { width: x, height: y }; $('#canvas').css(dimensions).prop(dimensions); 

And finally, here is the violin

Answer 3

Demo http://jsfiddle.net/U5XrK/3/

Q: I would like the canvas to be a full window, but it looks sharp.

A: Set the width and height of the canvas in the same way as the start time of the window in the canvas:

---

Code:

 // Draw on canvas var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); c.width = $(window).width(); // Add this to your code c.height = $(window).height(); // Add this to your code ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); 

---

Explanation:. When resizing the created image using CSS, the original canvas size does not change, so basically you are trying to enlarge the image to a smaller size, which leads to lower quality. If your canvas has a given size at creation, you will not have this scaling problem.

Answer 4

The canvas consists of a drawing area defined in the HTML code, with height and width attributes .

When you specify a CSS width / height value — it’s like doing the same with an IMG element — you scale it, not set its actual size.

So, you should customize the canvas HTML attributes for the actual dimensions, not your CSS.

Answer 5

U should use mothod under:

 var c = document.getElementById("canvas"); c.width = 500; c.height = 500; var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();