Холст: масштабирование и панорамирование ⇐ Html

[Anonymous]

Я изо всех сил пытаюсь заставить этот рисунок на холсте увеличивать и уменьшать масштаб и панорамировать его. Есть несколько примеров с панорамированием и масштабированием изображений, но мой случай другой, и я не знаю, что и как мне делать в моем случае, потому что это не изображения. Буду признателен за любые советы или любую библиотеку, которую вы могли бы предложить?

Код: Выделить всё

canvas{border:#666 1px solid;}



window.onload=draw;//execute draw function when DOM is ready
function  draw(){
//assign our canvas element to a variable
var canvas=document.getElementById('canvas1');
//create the html5 context object to enable draw methods
var ctx=canvas.getContext("2d");

ctx.beginPath();
ctx.arc(150, 200, 20, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.moveTo(150,200);
ctx.lineTo(230,75);
ctx.stroke();

ctx.beginPath();
ctx.arc(230, 75, 20, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.moveTo(230,75);
ctx.lineTo(300,200);
ctx.stroke();

ctx.beginPath();
ctx.arc(300,200, 20, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.moveTo(300,200);
ctx.lineTo(150,200);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(300,200);
ctx.lineTo(225,300);
ctx.stroke();

ctx.beginPath();
ctx.arc(225,300, 20, 0, 2 * Math.PI);
ctx.fill();

//fillStyle (r, g, b, alpha)
//ctx.fillStyle = "rgba(0,200,0,1)";
//fillRect (X, Y, Width, height)
//ctx.fillRect(36,10,220,120);
}

Это снимок экрана моего рисунка, который я пытаюсь увеличить с помощью курсора мыши:

рисунок на холсте

Подробнее здесь: https://stackoverflow.com/questions/475 ... nd-panning