CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Nikunj Sardhara
Nikunj Sardhara

Reputation: 638

How can i get high resolution image from smaller canvas?

I am using one canvas in my web app and it's actual height and width are 500px. I am showing this canvas on screen as 500px square but i want image exported from this canvas as 1600px square. I have tried below code with no luck.

canvas.width = 1600;
canvas.style.width = 500;

Any help will be appreciated.

Upvotes: 2

Views: 5859

Answers (3)

Sajan
Sajan

Reputation: 821

HTML

<canvas width="1600px" height="1600px" > </canvas>

CSS

canvas{
   position :absolute;
   transform:scale(0.3125);
   left:-500px; //adjust
   top:-350px; //adjust
}

Use transform:scale() to adjust size of your canvas

Now 1600 * 1600 will be the actual size of your canvas, so you can directly export images from your canvas

But in view it show as 500px * 500px beacuse it's scaled down, it dose not affect the image quality while exporting

Upvotes: 3

Blindman67
Blindman67

Reputation: 54026

You can have the canvas display at 500px while still having a resolution of 1600px. Display size and resolution are independent. For resolution you set the canvas width and height properties. For display size you set the canvas style width and height properties.

// create a canvas or get it from the page
var canvas = document.createElement("canvas");
// set the resolution (number of pixels)
canvas.width = canvas.height = 1600;
// set the display size
canvas.style.width = canvas.style.height = "500px";
// get the rendering context
var ctx = canvas.getContext("2d");

To get the rendering to match the display size you need to scale up all rendering. You can do this by setting the transform scale to the canvas resolution divided by the display size

var scale = 1600 / 500; // get the scale that matches display size 
ctx.setTransform(scale,0,0,scale,0,0);

Now when you render to the canvas you use the screen size coordinates.

ctx.fillRect(0,0,500,500); // fill all of the canvas.
ctx.fillStyle = "red";  // draw a red circle 100 display pixels in size.
ctx.beginPath();
ctx.arc(250,250,100,0,Math.PI * 2);
ctx.fill();

When you then save the canvas, what ever method you use as long as it is not screen capture the saved canvas will be 1600 by 1600 and all the rendering will be correctly positions and proportional

Upvotes: 7

towc
towc

Reputation: 2034

Honest answer: you can't.

If you did, then you'd have found a way to losslessly compress data with less than 1/9th of the original size, and without any encoding, which is unarguably impossible.

What you can do is scale it up in a way that it at least doesn't get blurry. To do that, you need the final image to be an integer multiple of the previous canvas, so the browser won't apply anti-aliasing. Or if you want to use your own copying formula with putImageData that would get rid of anti-aliasing, you'll still get various incongruences and it would be very slow

In your case, the closest you could get is 1500x1500 ( 3*500x3*500 ). If your point was to process an image, you're not in luck, but if you just want to display something good enough, you can resort to various other tricks such as centering the canvas and using properties like box-shadow to make it clear that it's separate from the rest of the screen

Upvotes: 1

Related Questions