Canvas Mouse drawing

const caDrag = {
	_imgList: []._shapeList: []._lineList: []._penData: [].init: function() {
		this.ca = document.createElement('canvas')
		this.ca.width = window.innerWidth
		this.ca.height = window.innerHeight
	
		this.baseMsg = this.ca.getBoundingClientRect()
		// console.log(this.baseMsg)
		this.ctx = this.ca.getContext('2d')
		document.body.appendChild(this.ca)
		const that = this
		this.ca.addEventListener('mousedown'.function(e) {
			that.mouseDown(e)
		})
		this.ca.addEventListener('mousemove'.function(e) {
			that.mouseMove(e)
		})
		this.ca.addEventListener('mouseup'.function(e) {
			that.mouseUp(e)
		})
	},
	reset: function() {
		this.ca.width = this.ca.width
		this.ca.height = this.ca.height
	},
	draw: function() {
		this.reset()
	},
	getPen: function(x1, y1) {
		this.ctx.strokeStyle = 'red';
		// Set the width of the line
		this.ctx.lineWidth = 5;
		this.ctx.beginPath();
		this.ctx.moveTo(x1, y1)
		
	},
	overPen: function(x1, y1) {
		this.ctx.closePath()
	},
	drawPen: function(x1, y1) {

		this.ctx.lineTo(x1, y1);
		this.ctx.stroke();
	},
	mouseDown: function(e) {
		this.prass = true
		console.log(e)
		this.getPen(e.pageX, e.pageY)
	},
	mouseUp: function(e) {

		this.prass = false
		this.overPen(e.pageX, e.pageY)


	},
	mouseMove: function(e) {
		if (!this.prass) {
			return
		}
		this.drawPen(e.pageX, e.pageY)



	},
	save:function(){},setData:function(){
		
	},

}
caDrag.init()

Copy the code