HTML canvas making blurry shapes

Question

I want to make simple shapes using HTML. But the shapes need to be big. And the canvas is in full screen

Example: http://jsfiddle.net/xLgg43s9/1/embedded/result/

Answer 1

Don't set the canvas's size through CSS, that stretches the canvas element, instead of actually making the canvas larger.

Use HTML attributes, instead:

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

Now, since you want to set the canvas to 100% width / height, those pre-set attributes aren't going to do the trick for you, you're going to have to use some JS:

var canvas = document.getElementById("canvas");
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
var ctx=canvas.getContext("2d");
// etc...

If you want to have the canvas resize when the window gets resized, I'd suggest you look at this answer.