CODEWITHSUNDEEP
javascripthtmlimagecanvas
Matt
Matt

Reputation: 41

How can I copy a hidden canvas object to image without a blurred image

I am rendering a QR code to a div, however the div is hidden. When I copy the canvas to an image with the correct size, the image is blurred. var children = $("#trial").children(); var canvas = children[0];

var ctx = canvas.getContext('2d');
//ctx.scale(3,3);

var img = new Image();

img.width = "300";
img.src = canvas.toDataURL();
$("#imagetrial").html(img);

I have tried scaling it as in the commented code, but the raw image turns out small, and when stretching the image it is blurred. If the div is not hidden, the code works correctly, but I cannot show the canvas, I am only interested in the data url which is passed on to a pop up print page.

Does anyone know a way to adjust the canvas size in the hidden div so that it copies correctly?

Upvotes: 2

Views: 1141

Answers (2)

Matt
Matt

Reputation: 41

I ended up hiding the div by placing it offscreen, then the canvas gets copied correctly.

Upvotes: 2

mattdlockyer
mattdlockyer

Reputation: 7314

You can set the width of a canvas (onscreen or offscreen) like this:

canvas.width = 300;

You may be running into some subpixel issues regardless of canvas and image size matching.

Every canvas applies anti aliasing that CANNOT be turned off if the image you're generating on the canvas contains graphical elements or images drawn at sub pixel coordinates.

See this article: http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation

Upvotes: 2

Related Questions