canvas drawimage resize quality

//You just need to calculate the image aspect ratio: var f = image.height / image.width; var newHeight = canvas.width * f; //And then draw using the recalculated height of image for destination: ctx.drawImage(image, 0, 0, image.width, image.height, // source size 0, 0, canvas.width, newHeight); // destination size //Canvas will do the clipping for you. //If you want to lets say center the destination vertical position you can do: var destY = (canvas.height - image.height) / 2; ctx.drawImage(image, 0, 0, image.width, image.height, // source size 0, destY, canvas.width, newHeight); // destination size

change image size in canvas

/*Generally you can't resize drawn element in canvas, but you can redraw
it with changed parameters. Something like this.*/

function clearDrawAndGrow ( multiplier ){
      context.clear(0,0,canvas.width,canvas.height);
      /*Whats important that you should not change size of the origin
      image, but sizes on "drawImage()" method as below*/
    context.drawImage(image, 0, 0, image.width * multiplier, image.height * multiplier);
}

//Example code that change image size every 2 sec:
var image = document.getElementById("image");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var size = 1;

function draw(){
      clearDrawAndGrow(size);
      size *= 1.1;
}

setInterval(draw, 2000);

Posted by: Guest on September-27-2021

Code answers related to "canvas drawimage resize quality"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "canvas drawimage resize quality"

Code answers related to "canvas drawimage resize quality"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us