Html5 scale трансформация

решил написать некое подобие карты и возникла проблема с масштабированием... Сначала я пробовал вот так:

...
context.scale(number, number);
...

Как и предполагалось, масштабирование происходило относительно начала координат, т.е (0;0). Затем я решил сметить начало координат в цент, проделать масштабирование и вернуть ее обратно:

...
context.translate(canvas.width, canvas.height);
context.scale(number, number);
context.translate(0, 0);
...

Сейчас стало все получше, но масштабирование происходит примерно в (-0.5;-0.5) если брать систему координат от -1 до 1. Да и сместится не получается после масштабирования в начало системы координат(рисунок рисуется с середины экрана после этого). Может кто-нибудь подскажет как реализовать масштабирование, либо от центра, либо от текущей позиции мыши(обработку сам напишу за основу взять просто две координаты). В идеале хотелось бы добиться примерно такого эффекта как в яндекс или гугл картах)