Canvas needs to be defined directly in the label as wide height

Used to paint with canvas, are directly in the canvas tag directly written on the wide, no problem, but also did not explore why wide Gaoyao directly written in the canvas tag, because the various data examples are written. Today, Sir Wang raised a question: if you write the width of the height in <style>, see what will be different. Try the following yourself, there is a problem.

First look at the code:
The code is as follows:

&lt;! DOCTYPE html&gt;


&lt;html&gt;


&lt;head&gt;


&lt;meta charset= "Utf-8" &gt;


&lt;title&gt;canvas&lt;/title&gt;


&lt;meta name= "Keywords" content= "" &gt;


&lt;meta name= "author" content= "@my_programmer" &gt;


&lt;style type= "Text/css" &gt;


body{margin:0;}


canvas{margin:20px;


/*width:400px;


height:300px;*/


}


&lt;/style&gt;


&lt;/head&gt;


&lt;body onload= "Draw ()" &gt;


&lt;canvas id= "Canvas" width=400 height=300 "style= border:1px #f00;" &gt;&lt;/canvas&gt;


&lt;script&gt;


function Draw () {


var Canvas=document.getelementbyid (' canvas ');


var context=canvas.getcontext (' 2d ');


Context.beginpath ();


Context.moveto (20,20);


Context.lineto (200,100);


context.linewidth=5;


Context.stroke ();


}


&lt;/script&gt;


&lt;/body&gt;


&lt;/html&gt;

1. Width: 400; High: 300; directly written in <canvas> effect:

2, remove <canvas> width, Width: 400; High: 300; written in <style> effect:

Why are the two effects different?

Canvas like any other label, you can also define styles through CSS. But note here: The default width of the canvas is 300px * 150px, in the CSS for the canvas definition of wide, in fact, the width of the 300px * 150px canvas is stretched, if in such a case canvas drawing, The graphics you get may be the effect of the deformation. Therefore, in the canvas drawing, should be in the canvas label directly define the width of the height.