setAttribute of newImage()

Question

I am reading in an image through FileReader() and creating a new image object to put into a canvas. I successfully get the image into my canvas but I can not set the attributes of width and height to fit into my 600x800 canvas. The image retains its original size. How can I change the dimensions of the new Image object?

reader.onload = function(e) {
    var imgObj = new Image();
    imgObj.src = e.target.result;   //Successfully sets src
    imgObj.setAttribute("height", 200);
    imgObj.setAttribute("width", 400);
    ctx.drawImage(imgObj,0,0);  
}

Possible duplicate of [How to scale an imageData in HTML canvas?](http://stackoverflow.com/questions/3448347/how-to-scale-an-imagedata-in-html-canvas) — zero298, Mar 16 '16 at 23:19
You're asking the wrong question. You want to draw an image to a canvas of given dimensions, and make the image fit. This can be done using the arguments of the `drawImage` method: https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage — pawel, Mar 16 '16 at 23:26
_"but I can not set the attributes of width and height to fit into my 600x800 canvas"_ What is purpose of setting image `width` to `400` , `height` to `200` if `canvas` `width` is set to `600`, `height` set to `800` ? — guest271314, Mar 16 '16 at 23:26
@guest271314 just arbitrary numbers. Basically just means I want the picture inside the canvas smaller than the canvas itself. — swam, Mar 16 '16 at 23:42

score 1 · Answer 1 · answered Mar 16 '16 at 23:24

1

Here, you are setting the width and height of the image's HTML element which has no effect on the image data. To scale the image when drawing, you can pass the width and height during the drawImage() call.

ctx.drawImage(imgObj, 0, 0, 400, 200);

From the documentation, drawImage() accepts any of the following:

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Here, all arguments prefixed with s reference the source image and all arguments prefixed with d reference where the image will be put, the destination.

answered Mar 16 '16 at 23:24

Evan Kennedy

3,975
1
25
31

This helps. Thanks. Also used the last suggestion in [How to scale an imageData in HTML canvas?](http://stackoverflow.com/questions/3448347/how-to-scale-an-imagedata-in-html-canvas) as suggested by @zero298. – swam Mar 16 '16 at 23:31
9 arguments is ridiculous. whose can name the 7th one quickly without looking? – dandavis Mar 17 '16 at 00:42
Once you get the hang of it, it's not hard. It's just image, source dimensions, destination dimensions. Making it even easier will be when the spread operator is widely implemented (already is in some browsers like Chrome). If you already have a 4-length array for source and destination, you can write `ctx.drawImage(image, ...src, ...dst)`. If you don't have those arrays you can also just group things together like `ctx.drawImage(image, ...[0, 0, 200, 400], ...[0, 0, 100, 500])`. Then it's easy for those people who find it hard to count to 9. – Evan Kennedy Mar 17 '16 at 19:18

setAttribute of newImage()

1 Answers1