How to resize canvas to size without blur?

Question

When resizing a canvas element (using a style change), I also want to scale the inverse of the canvas. I can't just change the height / width as this causes the canvas to clear itself, so I do:

• Creating a temporary canvas item
• Draw a picture of the current canvas on this temporary canvas
• Resize current canvas
• Draw the temp canvas image back to the current canvas, but scale to a new size.

This leads to some blurring - very noticeable after many changes (for example: when dragging to resize). How can I do this without any blur?

EDIT: Disabling image anti-aliasing ( context.webkitImageSmoothingEnabled = false; ) does not fix the problem, it just makes it redraw it more and more, until the image looks like the original after several resizing.

A resize event is raised:

  var tmpCanvas = null; //Make a temporary canvas tmpCanvas = document.createElement( "canvas" ); //Set its size to be equal tmpCanvas.height = originalCanvas.height; tmpCanvas.width = originalCanvas.width; //Draw our current canvas onto it tmpCanvas.getContext( "2d" ).drawImage( originalCanvas, 0, 0 ); //Set new dimensions originalCanvas.width = originalCanvas.offsetWidth; originalCanvas.height = originalCanvas.offsetHeight; var originalContext = originalCanvas.getContext( "2d" ); //Set background and colors originalContext.fillStyle = "#ffffff"; originalContext.strokeStyle = "#000000"; //Set paintbrush originalContext.lineWidth = 4; originalContext.lineCap = "round"; //Fill background as white originalContext.fillRect( 0, 0, originalCanvas.width, originalCanvas.height ); //We have a saved signature if ( SignatureCanvas.hasSignature === true ) { //Draw it back but scaled (results in blurred image) originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, originalCanvas.width, originalCanvas.height ); /** * This results in a blurred image as well //Draw it back but scaled originalContext.scale( originalCanvas.width / tmpCanvas.width, originalCanvas.height / tmpCanvas.height ); originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, tmpCanvas.width, tmpCanvas.height ); */ } 

Is there a way to get the strokes and “scale” all these points and redraw?

Answer 1

Instead of displaying the image from the original canvas, actually redraw the image. By this I mean the execution of the same logic that you performed against the original canvas, but given that the points were enlarged to a new size.

If possible, consider using SVG. It scales well in nature.

Edit: Another option I was thinking about is to just use a giant canvas to get started. Sort down tends to look better than alignment, especially when smoothing.

Answer 2

Edit II: the original answer was irrelevant, although the comment I made matters, and now I promote it and edit it to be the answer ... and the answer I gave is not that big **,

Of course, if you scale bitmap graphics, that is, from an image with a smaller pixel size, create an image with a higher pixel size, you will get blurry images. When scaling, you create a low-resolution image with a high resolution, but without high-resolution detail.

There is absolutely no way around this blur unless you make a few additional assumptions about your bitmap as soon as the gray color you see is at the edge of the image, or the corners can only appear at the apparent inflection points, where the angle between the tangents is connected by curves should be 100 degrees or less. Essentially, you will need to provide additional information so that your higher resolution image can contain “filled in” details. This is not all that is terribly different from reverse engineering SVG from raster.

So, you seem to want to emulate vector graphics scaling, in which the only solution is to save the commands, draw the SVG, or draw on a larger canvas, as Stuart Branham suggested.

** I initially suggested that calling drawImage would distort the pixels even if it didn't scale, and that it would be better to work with the actual pixel data. If this is true, I can’t find evidence, but it doesn’t matter, because he wanted his image to enlarge, without blurring ... which is impossible, which I just mentioned.