javascript - HTML Blurry Canvas Images

Question

I use jcrop to provide users with a friendly way of uploading their images via ajax. Obviously these images have some constraint like width and height which is where jcrop comes into play. So for the sake of brevity what im doing is as follows:

input file select via javascript file api loads the image into a img tag. Jcrop works with this image tag and renders the result onto a html canvas.

Now this is the dodgy part. The canvas image is always blurry...

for arguments sake the canvas is set to 400x200 which is the crop size.

Answer 1

If the canvas width and height is set via CSS it results in a blurry image result. TO get around this I had to set the width and height via html attributes. Now I have a wonderful cropping solution that can save images via AJAX. Crisp and Clear:)

<canvas id="preview" width="400" height="200"></canvas>