Как сделать масштабирование?

Question

[vo0ov programmer]

Как сделать масштабирование как на pixelplanet.fun?
У меня есть:

<style>
.pixel,
.pixel:active,
.pixel:focus {
    border: solid;
    /* border: none; */
    border-color: #2e2e2e;
    border-width: 2px;
    width: 50px;
    height: 50px;
}
</style>
<div id="container">
    <button class="pixel"></button>
    <button class="pixel"></button>
    <button class="pixel"></button><br>
    <button class="pixel"></button>
    <button class="pixel"></button>
    <button class="pixel"></button><br>
    <button class="pixel"></button>
    <button class="pixel"></button>
    <button class="pixel"></button><br>
</div>

Здесь нужно как то сделать прокрутку во все стороны и приближение. Размер у div должен быть фиксированный.

Comments

[iBird Rose]

ты думаешь там просто так это все сделано на canvas? ты не сможешь это реализовать на div'ах. а даже если сделаешь - ты эту страницу не откроешь. ибо браузер крашнется просто во время рендера всего этого

[vo0ov programmer]

iBird Rose, хорошо, тогда как это сделать на canvas-е? (Я не планирую делать поле 32000 на 32000, поэтому браузер не крашнет)

[iBird Rose]

vo0ov programmer, https://codepen.io/jah2488/pen/GRGVmr
можешь еще там же на codepen поискать по запросу "canvas pixel"

[vo0ov programmer]

iBird Rose, спасибо, но на телефоне не рисует.