Canvas inline height and width attributes overridden with css styles. Is this is a bug?

Question

I recently asked a question on how to draw an image larger than my canvas onto the canvas without cropping and save the image back into its original dimensions after perform

Answer 1

I know its been a long time since the question was asked, but I have another solution that can be used as well.

You can try using the canvasContext.drawImage() function, to resize the image as you draw the image into your canvas.

Syntax: void ctx.drawImage(image, dx, dy, dWidth, dHeight);

• dx and dy are the destination canvas' x and y coordinates
• dWidth and dHeight are the dimensions in which your image will be drawn on the canvas.

(If you know the size of the canvas and your image, you can calculate what these values need to be)

Answer 2

This behaviour is commonly used for controlling the size of a canvas:

• Attributes for resolution
• CSS for stretching/shrinking

See Canvas width and height in HTML5.