Question 177326 in Html Question posted in
Some basic documentation can be found here.

Html – Canvas resolution and export resolution

I have canvas which is width="600px" and height="500px".

then I show the image(1200px and 1000px) on this canvas

ctx.drawImage(img,600,500);

finally export with this script.

var a = document.createElement('a');
a.href = mycanvas.current.toDataURL('image/jpeg', 0.85);

In this case jpg’s final resolution is 600px x 500px.

However I want to keep final resolution 1200 x 1000 jpg.

What is the best practice for this purpose.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I use clientWidth and width

    use clientWidth = 600 and width = 1200

    It can be done.


  2. 0

    You can follow these steps to keep your final resolution as 1200 x 1000 px.

    var finalCanvas = document.createElement('canvas');
finalCanvas.width = 1200;
finalCanvas.height = 1000;
var finalCtx = finalCanvas.getContext('2d');

finalCtx.drawImage(img, 0, 0, finalCanvas.width, finalCanvas.height);
var a = document.createElement('a');
a.href = finalCanvas.toDataURL('image/jpeg', 0.85);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search