Html5 canvas - is width / height required in a string?

Question

I was messing around with HTML5 / Javascript and found what I don't understand.

I tried to write some basic procedures for working with an HTML5 canvas and found that the drawImage function does not draw anything. Assuming this is my code, I used the code from an existing tutorial, namely the HTML5 Canvas Image Tutorial . When I included the Javascript code in it from the outside (i.e., as a separate file), I still did not see my image facing the canvas.

From there I copied the full source, found it here , literally, and it really worked. I started messing around to see why it worked, but mine didn’t.

I found that the difference was that the verbatim code determined the width and height of the line in the line. I prefer to separate the style of HTML and CSS. The code worked if I did:

<canvas id = "myCanvas" width = "600" height = "400"></canvas> 

but it didn’t work if I determined the width and height of the canvas in the external CSS stylesheet.

I really decided that one of my problems was that I included a stylesheet after the Javascript file; Before doing this, my image did not appear at all, even after confirming with the alert () function that the code inside the image loading handler was lit. After changing the order in which the files were included, my image appeared, but it was strangely scaled, as if the CSS style was ignored.

Why is this? Am I missing something regarding the order in which canvas properties are defined using CSS? Why does Javascript ignore CSS style in this case? If at all relevant, I have tried this in the latest versions of Chrome and Firefox.

Answer 1

According to the HTML5 specification, this is not required:

The canvas element has two attributes for controlling the size of the coordinate space: width and height. These attributes, if specified, must have values ​​that are real non-negative integers. Rules for analyzing non-negative integers should be used to get their numerical values. If the attribute is missing or parsing its value returns an error, use the default value instead. The default width attribute is 300, and the default height attribute is 150.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

Answer 2

You do not need to write them there, you can write them later in JavaSript:

 var can = document.getElementById('canvas1'); can.width = 600; can.height = 400; 

The default is 300x150.

Note that you should never use CSS to determine your width and height, because you will scale the canvas, not resize it, causing blur and loss of proportion.

Answer 3

Yes, they must be written in the attributes, otherwise the real canvas size will be 300 x 150 . And if you change your size using css, it will be stretched / scaled, as well as any other image.

Answer 4

Items

have two different attributes of width and height.

One of them is usually defined inline (or later in javascript itself). This is the actual pixel canvas dimension used by the program for drawing purposes.

One is the width and height of the style. This can be defined by CSS (while the width and height of a pixel cannot be).

The simple answer is no. You can set the width and height in your javascript if you want, but any height and width that you assign using CSS will change the size of the canvas screen (not the actual size), which can distort your image.