在某个位置使用canvas画图，结果不显示笔迹

问题描述

第一次使用canvas画图，并且不是从浏览器左上角（0,0）点开始画，结果发现笔迹等都存在，但画布中没有显示。
1、首先第一个问题，通过fillRect画出来的应该是个300*300的正方形。实际得到的是大概600*300的矩形。
2、第二个问题，mousemove监听被触发，lineTo和stroke都被执行，但是话不中没有笔迹。

<div id="canvas-box">
	<canvas id="canvas"></canvas>
</div>
<style>
	canvas {
		background-color: #F5F5F5;
		width: 300px;
		height: 300px;
	}
	#canvas-box {
		width:400px;
		height: 400px;
		margin: 50px auto;
		background: red;
	}
</style>

<script>
	this.canvas = document.querySelector("#canvas");
	this.ctx = this.canvas.getContext("2d");
	this.ctx.strokeStyle = "#000";
	this.ctx.fillStyle = "#f5f5f5";
	this.ctx.lineWidth = 10;
	this.ctx.fillRect(0, 0, 300, 300);
	
	this.canvas.addEventListener("mousedown", evt => {
		this.ctx.beginPath();
		this.ctx.moveTo(evt.pageX, evt.pageY);
		this.canvas.addEventListener("mousemove",this.bindMousemoveHandler(), false);
	}, false);
	
	this.canvas.addEventListener("mouseup", () => {
		this.canvas.removeEventListener("mousemove",this.bindMousemoveHandler(), false);
	}, false);
	
	bindMousemoveHandler: function() {
		if(!this._bindedFun) {
			this._bindedFun = this.canvasMousemoveHandler.bind(this);
		}
		return this._bindedFun;
	},
	
	canvasMousemoveHandler: function(evt) {
		this.ctx.lineTo(evt.pageX, evt.pageY);
		this.ctx.stroke();
	},
</script>

---

原因分析：

1、首先通过打印确认笔迹点的位置是否正确。发现lineTo的时候（x，y）的取值不对。pageX和pageY是按照浏览器左上角为初始坐标计算的。而我的画布并不是从左上角开始的。推测两个笔迹使用了，以左上角为初始坐标计算出来的（x，y）在我的画布上画。排查鼠标事件回调中的其他参数使用offset系列的参数来画。mousedown中开始坐标的点位也要调整。

this.canvas.addEventListener("mousedown", evt => {
	this.ctx.beginPath();
	this.ctx.moveTo(evt.offsetX, evt.offsetY);
	this.canvas.addEventListener("mousemove",this.bindMousemoveHandler(), false);
}, false);

canvasMousemoveHandler: function(evt) {
	this.ctx.lineTo(evt.offsetX, evt.offsetY);
	this.ctx.stroke();
},

开始试验在画布上操作，发现笔迹出现，但是并没有贴合鼠标轨迹。打印一下当前的canvas。自己查找发现，canvas当前的大小并不是我样式中设置的300*300，而是300*150。猜测重置canvas大小比例失效了。会不会是css并不会修改canvas的大小比例呢，把css中的宽高取消掉。尝试其他方式修改。

<canvas id="canvas" width="300px" height="300px"></canvas>

发现页面展示fillRect有变化。是一个300*300的正方形了。尝试画一下。发现笔迹正常。再次打印canvas，发现canvas的大小变成300*300了。
把内联样式删除，再换一种方式尝试一下。

this.canvas = document.querySelector("#canvas");
// 新增下面两行赋值
this.canvas.width = 300;
this.canvas.height = 300;
this.ctx = this.canvas.getContext("2d");
this.ctx.strokeStyle = "#000";
this.ctx.fillStyle = "#f5f5f5";
this.ctx.lineWidth = 10;
// 调整赋值
// this.ctx.fillRect(0, 0, 300, 300);
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

验证发现笔迹也是正常的。

得出结论，canvas的大小只能使用内联样式或者使用js赋值更改。使用css修改是无效的。