Full-screen Canvas is low res
canvas, html, javascript, jquery
Solution
try this
<canvas id="canvas" width="500" height="500">
</canvas>
We can't set the width and height of the canvas element using css, since it won't get rendered properly as document says. You have to set its
or you have to use
function initCanvas() {
$('#canvas').attr("width",$(window).width());
$('#canvas').attr("height",$(window).height());
}
DEMO
Problem
I've looked at the questions here and followed the answers but my canvas is still low resolution: CSS: ``` #canvas { position: absolute; top: 0; left: 0; z-index: -1; } ``` JS: Initialise Canvas (called once when page load and again on window resize) ``` function initCanvas() { $('#canvas').width($(window).width()); $('#canvas').height($(window).height()); } ``` Drawing line 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 line appears low res. I would like a canvas that is full window but appears sharp. NB: I use absolute position and z-index -1 for canvas because I would like it to appear behind anything else I later add on the page.