html矢量图 对画布的拖拽,原生WebGL如何使用鼠标拖拽画布？

如图，我在实现鼠标拖拽画布这个功能时拖拽动作非常不平滑，请问有没有更好的方式用原生WebGL来实现鼠标拖拽画布功能？

拖拽部分代码：gl.canvas.onmousedown = function (ed) {

//鼠标点击时鼠标距离浏览器左边的距离

const rect1 = ed.target.getBoundingClientRect();

let {ma, mb} = canvasToWebGL({x: ed.clientX, y: ed.clientY}, {top: rect1.top, left: rect1.left}, gl);

// let ma = ed.clientX,mb = ed.clientY;

gl.canvas.onmousemove = function (em) {

gl.canvas.style.cursor = 'grabbing'

const rect2 = em.target.getBoundingClientRect();

let {x, y} = canvasToWebGL({x: em.clientX, y: em.clientY}, {top: rect2.top, left: rect2.left}, gl);

//canvas元素左边距离浏览器屏幕左边的距离

// let x = em.clientX, y = em.clientY;

if (ma - x > 0) {

gl.offsetX -= gl.tran_step

} else {

gl.offsetX += gl.tran_step

}

if (mb - y > 0) {

gl.offsetY -= gl.tran_step

} else {

gl.offsetY += gl.tran_step

}

// gl.translation_matrix = translation(x-ma,y-mb,0)

// console.log(gl.translation_matrix)

draw(gl);

ma = x;

mb = y;

}

gl.canvas.onmouseup = function () {

gl.canvas.style.cursor = 'default'

gl.canvas.onmousemove = null;

gl.canvas.onmouseup = null;

}

}