The difference between width, height and style in H5 canvas

Canvas's Width Height property

1. When the width Height property is used, the display will not be stretched as normal;

<canvas id= "MyCanvas" width= "height=" > Browser does not support canvas, please upgrade or switch to another browser! </canvas><script type= "Text/javascript" >var canvas = document.getElementById ("MyCanvas"), CTX = Canvas.getcontext (' 2d '); Ctx.moveto (0,0); Ctx.lineto (300,150); Ctx.stroke ();</script>

　　

The effect is as follows: Diagonal

2. When using style, the image will be stretched (deformed),

<style>                #mycanvas {        width:150px;        height:150px;        }    </style>

　　

Run effect

How to understand??? So you can understand ————

Canvas is an artboard and a sheet of paper, the artboard is equivalent to a container, drawing/work is carried out on the paper,

The default width of the artboard and the paper is 300*150, and when the paper is equal to the artboard, the image is not stretched, and the image is stretched (deformed) when the paper is not the same as the canvas's width.

1, the width and Height properties are set to the width and height of the artboard and the canvas,

such as: width= "" height= "300" that is, the width of the artboard is 300*300, the width of the paper is also 300*300, the 300*300 of the work of the diagonal image will not be stretched

2, the style style set is only the width of the artboard, the width of the paper or the default value of 300*150,

Thus the 300*300 diagonal image of the work is only partially drawn on the paper, as follows:

BTW paper will not let the artboard so empty out a piece, so the drawing with the image will be stretched to the same size as the artboard. In this example, the width of the drawing paper and the width of the artboard are 30, and the height is half of the artboard, so only one times the high tensile, so the image is also stretched to thin, the x direction is unchanged, the y direction is increased to one times, so you get the image after the deformation

A summary of quoting http://www.cnblogs.com/JamKong/p/4987163.html

About the width and height of canvas in HTML5 canvas element default width 300px, height 150px, set its width height can be used as follows (not stretched): Method One:       <canvas width= "500" height= " ></canvas> method Two: Use HTML5 Canvas API operation OK       var canvas = document.getElementById (' to manipulate the canvas id ');       Canvas.width = $;       Canvas.width = 500; If you set the width height by the following method, the canvas element will be stretched from its original size to the width height set: Method one: Using CSS will be stretched     #欲操作canvas的id {          width:1000px;          height:1000px;     } Method Two: Using the HTML5 Canvas API operation will be stretched      var canvas = document.getElementById (' to manipulate the canvas's id ');      Canvas.style.width = "1000px";      Canvas.style.height = "1000px"; method Three: $ ("#id") with jquery. Width (500); will be stretched other: the width and height of the canvas cannot be expressed as a percentage. The canvas will display the score as a numeric value

　　

The difference between width, height and style in H5 canvas