Using GameAlchemist's brilliant code found in HTML5 Canvas Resize (Downscale) Image High Quality?, I successfully scaled down an image with excellent fidelity.
The referenced answer returns a new canvas. If I take that canvas and write it to an existing canvas using drawImage() or putImageData() at the top-left corner (i.e. (0,0)), it looks great. As soon as I try to centre the image within an existing (larger) canvas, however, it becomes pixelated, though not as bad as it does when I allow the canvas to scale it down and centre it.
Is there a way to place images anywhere in the canvas without pixelation?
For example:
var canvas = document.getElementById("imageContainer");
canvas.setAttribute("height", 500);
canvas.setAttribute("width", 500);
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = some_url;
// see linked answer for downScaleImage()
var newcanvas = downScaleImage(image, 0.2);
// this is vertically centred but pixelated
// ctx.drawImage(newcanvas, 0, Math.round((canvas.height-newcanvas.height)/2));
// this is at the top-left corner but beautiful
ctx.drawImage(newcanvas, 0, 0);
Also, short of having multiple, small canvases, is there a way to combine high-quality images into a single canvas without pixelation occurring?
Thanks.
