Canvas drawings, like lines, are blurry

Question

I have a

and canvas, which is drawn using:

context.lineWidth = 1;
context.strokeStyle = \"gray\         


        

Answer 1

Lines are blurred because the canvas virtual size is zoomed to its HTML element actual size. To overcome this issue you need to adjust canvas virtual size before drawing:

function Draw () {
	var e, surface;
	e = document.getElementById ("surface");
	/* Begin size adjusting. */
	e.width = e.offsetWidth;
	e.height = e.offsetHeight;
	/* End size adjusting. */
	surface = e.getContext ("2d");
	surface.strokeRect (10, 10, 20, 20);
}
window.onload = Draw ()

HTML: