I'm using fill() while drawing this image in my canvas. I load the image using the code below:
var cerceve = new Image();
if ($(".cerceve.accessory-selected").length) {
cerceve.onload = function () {
cerceveDeferred.resolve();
};
cerceve.src = $(".cerceve.accessory-selected:first img").attr("src");
Basically, I define the src
of the Image
object then when it loads I start drawing it on the screen. But I want the image to load in custom sizes, how can I do that? I cannot use resizing with drawImage()
, because I need to use fill()
method and it does not specify any resizing options.
For example, if I set cerceve.height = 40;
after cerceve
loads, it draws the image with a height of 40 (40 is bigger than the original height), but the source image is not stretched, instead it repeats, draws many of the same image. I give it a custom height and the image behaves with repeat option. I want it to stretch.
Ok I got it. Instead of trying to resize the source image after it loads, you should use context scaling while drawing the image on the canvas. context.scale(x,y);
is probably the way to go.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.