Explanation: Why Canvas Canvas's width is set between the rows

previously used Canvas when drawing, they are directly in the Canvas The label directly written on the width of the high, no problem, but also did not explore why the width of the directly written in Canvas tag, because it's written in every case of data. Today, Mr Wang raises a question: If you write the width and height in <style> , see what's different. I tried the following, and sure enough there was a problem.

Check the code First:

<! DOCTYPE html>

body{margin:0;}

canvas{margin:20px;

/*width:400px;

height:300px;*/

} </style>

<canvas id= "Canvas" width=400 height=300 style= "border:1px solid #f00;" ></canvas><script>

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 ();

}</script></body>

1. Width: 400, High: 300, direct write in <canvas> effect:

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

Why are the two effects different?

Canvas, like any other label, can also define styles through CSS. However, it is important to note that the default width of canvas is 300px * 150px, the canvas is defined in CSS for a wide height, in fact, the width of 300px * 150px is stretched, if in this case canvas drawing, The graphic you get may be the effect of deformation. Therefore, when you draw a canvas, you should define the width height directly in the canvas label.

Explanation: Why Canvas Canvas's width is set between the rows