Я делаю небольшую рисовалку, работает вначале отлично, но потом массив забивается и начинает тупить. Как лучше реализовать очистку массива, чтобы нарисованное изображение не исчезало?
var canvas, ctx;
var draw = false,
pos = [];
function init() {
canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 500;
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
setInterval(function() {
update();
render();
}, 1000/60);
}
function update() {
}
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
Drawing();
}
document.addEventListener("mousedown", OnMouseDown, false);
document.addEventListener("mousemove", OnMouseMove, false);
document.addEventListener("mouseup", OnMouseUp, false);
function OnMouseDown(e) {
var m = getMouse(e);
pos.push({
x: m.x,
y: m.y
});
draw = true;
}
function OnMouseMove(e) {
var m = getMouse(e);
if(draw)
pos.push({
x: m.x,
y: m.y
});
}
function OnMouseUp(e) {
draw = false;
pos = [];
}
function getMouse(e) {
var mx, my;
mx = (e.cleintX || e.pageX) - canvas.offsetLeft;
my = (e.clientY || e.pageY) - canvas.offsetTop;
return {x: mx,y: my};
}
function Drawing() {
ctx.lineCap = "round";
ctx.lineWidth = 7;
for(var i = 1; i < pos.length; i++) {
ctx.moveTo(pos[i-1].x, pos[i-1].y);
ctx.lineTo(pos[i].x, pos[i].y);
}
ctx.stroke();
}
init();