Comment: When writing width and height on canvas in canvas, it is the actual artboard size of canvas. By default, width is 300px and height is 150px. Next, the detailed introduction is given. Interested friends can refer to it.
In canvas, when writing width and height on canvas is the actual artboard size of canvas, by default width is 300px and height is 150px.When writing css style in style, widht and height are the actual display size.
Now take drawing a diagonal line with canvas as an example:
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>canvas</title>
<script type='text/javascript'>
window.onload = function(){
getCanvas();
};
//Canvase drawing
function getCanvas(){
//Get the canvas element and its drawing context
var canvas = document.getElementById('canvasId');
var context = canvas.getContext('2d');
// Create a path with absolute signposts
context.beginPath();
context.moveTo(0,200);
context.lineTo(200,0);
//Draw this on canvas first
context.stroke();
}
</script>
</head>
<body>
<canvas >/canvas>
</body>
</html>
The display effect is as follows:
As you can see, the canvas drawing board is a square of 200*200, and the drawing uses diagonal display from (0, 200) to (200, 0).
However, the graphics are displayed at a rectangle of 400*200, and the display is also a diagonal line.