Aumente o zoom em um ponto (usando a escala e a conversão)

156

Quero poder ampliar o ponto sob o mouse em uma tela HTML 5, como o zoom no Google Maps . Como posso conseguir isso?

csiz
fonte
2
Eu usei isso para ampliar minha tela e funciona muito bem! A única coisa que tenho a acrescentar é que o cálculo da quantidade de zoom não é o que você esperaria. "var zoom = 1 + roda / 2;" ou seja, isso resulta em 1,5 para ampliar e 0,5 para diminuir o zoom. Eu editei isso na minha versão para que eu tenha 1,5 para ampliar e 1 / 1,5 para diminuir o zoom, o que torna a quantidade de zoom mais e menos igual. Portanto, se você aumentar o zoom uma vez e diminuir o zoom, terá a mesma imagem de antes do zoom.
22411 Chris
2
Observe que isso não funciona no Firefox, mas o método pode ser facilmente aplicado ao plug-in jQuery mousewheel . Obrigado por compartilhar!
Johndodo #
2
var zoom = Math.pow (1.5f, roda); // Use isso para calcular o zoom. Tem o benefício de que o zoom por roda = 2 é o mesmo que o zoom duas vezes por roda = 1. Além disso, aumentar o zoom em +2 e reduzir em +2 restaura a escala original.
25413 Matt

Respostas:

126

A melhor solução é simplesmente mover a posição da viewport com base na alteração no zoom. O ponto de zoom é simplesmente o ponto no zoom antigo e o novo zoom que você deseja manter o mesmo. Ou seja, a viewport pré-ampliada e a viewport pós-ampliada têm o mesmo ponto de zoom em relação à viewport. Dado que estamos escalando em relação à origem. Você pode ajustar a posição da janela de exibição de acordo:

scalechange = newscale - oldscale;
offsetX = -(zoomPointX * scalechange);
offsetY = -(zoomPointY * scalechange);

Então, na verdade, você pode simplesmente deslocar-se para baixo e para a direita ao aumentar o zoom, por um fator de quanto você ampliou, em relação ao ponto em que você ampliou.

insira a descrição da imagem aqui

Tatarize
fonte
2
Mais valiosa que o código de recortar e colar é a explicação de qual é a melhor solução e por que ela funciona sem a bagagem, especialmente se tiver três linhas.
Tatarize
2
scalechange = newscale / oldscale?
Tejesh Alimilli
4
Além disso, gostaria de acrescentar aos que procuram obter um mapa como o componente de zoom panorâmico, que o mouse X, Y deve ser (mousePosRelativeToContainer - currentTransform) / currentScale, caso contrário, ele tratará a posição atual do mouse em relação ao contêiner.
Gilad
1
Sim, essa matemática supõe que o zoom e a panorâmica estejam nas cordas relevantes para a origem. Se eles são relativos à janela de visualização, você deve ajustá-los adequadamente. Embora eu suponha que a matemática correta seja zoomPoint = (mousePosRelativeToContainer + currentTranslation). Essa matemática também pressupõe que o ponto de origem esteja tipicamente no canto superior esquerdo do campo. Mas, ajustar para situações ligeiramente atípicas é muito mais fácil, dada a simplicidade.
Tatarize
1
@ C.Finke A segunda maneira de fazer isso é usando as traduções dentro do ctx. Você desenha tudo do mesmo tamanho e nas mesmas posições. Mas, você simplesmente usa as multiplicações de matriz na tela javascript para definir o panorama e a escala (zoom) do contexto. Então, em vez de redesenhar todas as formas em um local diferente. Você os desenha no mesmo lugar e move a janela de visualização em javascript. Esse método também exigiria que você pegasse os eventos do mouse e os convertesse para trás. Então você subtrai a panela e depois inverte o fator pelo zoom.
Tatarize
67

Finalmente resolvi:

var zoomIntensity = 0.2;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = 600;
var height = 200;

var scale = 1;
var originx = 0;
var originy = 0;
var visibleWidth = width;
var visibleHeight = height;


function draw(){
    // Clear screen to white.
    context.fillStyle = "white";
    context.fillRect(originx,originy,800/scale,600/scale);
    // Draw the black square.
    context.fillStyle = "black";
    context.fillRect(50,50,100,100);
}
// Draw loop at 60FPS.
setInterval(draw, 1000/60);

canvas.onwheel = function (event){
    event.preventDefault();
    // Get mouse offset.
    var mousex = event.clientX - canvas.offsetLeft;
    var mousey = event.clientY - canvas.offsetTop;
    // Normalize wheel to +1 or -1.
    var wheel = event.deltaY < 0 ? 1 : -1;

    // Compute zoom factor.
    var zoom = Math.exp(wheel*zoomIntensity);
    
    // Translate so the visible origin is at the context's origin.
    context.translate(originx, originy);
  
    // Compute the new visible origin. Originally the mouse is at a
    // distance mouse/scale from the corner, we want the point under
    // the mouse to remain in the same place after the zoom, but this
    // is at mouse/new_scale away from the corner. Therefore we need to
    // shift the origin (coordinates of the corner) to account for this.
    originx -= mousex/(scale*zoom) - mousex/scale;
    originy -= mousey/(scale*zoom) - mousey/scale;
    
    // Scale it (centered around the origin due to the trasnslate above).
    context.scale(zoom, zoom);
    // Offset the visible origin to it's proper position.
    context.translate(-originx, -originy);

    // Update scale and others.
    scale *= zoom;
    visibleWidth = width / scale;
    visibleHeight = height / scale;
}
<canvas id="canvas" width="600" height="200"></canvas>

A chave, como apontou @Tatarize , é calcular a posição do eixo de forma que o ponto de zoom (ponteiro do mouse) permaneça no mesmo local após o zoom.

Originalmente, o mouse está a uma distância mouse/scaledo canto, queremos que o ponto embaixo do mouse permaneça no mesmo local após o zoom, mas isso está mouse/new_scalelonge do canto. Portanto, precisamos mudar as origin(coordenadas do canto) para explicar isso.

originx -= mousex/(scale*zoom) - mousex/scale;
originy -= mousey/(scale*zoom) - mousey/scale;
scale *= zoom

O código restante precisa aplicar a escala e traduzir para o contexto do desenho, para que sua origem coincida com o canto da tela.

csiz
fonte
Obrigado cara, quase perdi 2 dias, antes de encontrar o seu código
Velaro 06/02
Ei, eu estava apenas procurando por algo assim e só queria dizer que você se emocionou!
chrisallick
26

Este é realmente um problema muito difícil (matematicamente), e estou trabalhando quase na mesma coisa. Fiz uma pergunta semelhante no Stackoverflow, mas não obtive resposta, mas postei no DocType (StackOverflow para HTML / CSS) e obtive uma resposta. Confira http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example

Estou no meio da construção de um plugin jQuery que faz isso (zoom no estilo do Google Maps usando transformações CSS3). O zoom do cursor do mouse está funcionando bem, ainda tentando descobrir como permitir que o usuário arraste a tela como você pode fazer no Google Maps. Quando o funcionar, postarei o código aqui, mas verifique o link acima para ver a parte do zoom do mouse até o ponto.

Eu não percebi que havia métodos de escala e tradução no contexto do Canvas, você pode conseguir a mesma coisa usando CSS3, por exemplo. usando jQuery:

$('div.canvasContainer > canvas')
    .css('-moz-transform', 'scale(1) translate(0px, 0px)')
    .css('-webkit-transform', 'scale(1) translate(0px, 0px)')
    .css('-o-transform', 'scale(1) translate(0px, 0px)')
    .css('transform', 'scale(1) translate(0px, 0px)');

Certifique-se de definir a origem da transformação CSS3 como 0, 0 (-moz-transform-origin: 0 0). O uso da transformação CSS3 permite aumentar o zoom em qualquer coisa, apenas verifique se o DIV do contêiner está configurado para estourar: oculto para impedir que as bordas ampliadas se espalhem pelas laterais.

Se você usa as transformações CSS3 ou os próprios métodos de escala e conversão da tela, é com você, mas verifique o link acima para os cálculos.


Atualização: Meh! Vou apenas postar o código aqui, em vez de levá-lo a seguir um link:

$(document).ready(function()
{
    var scale = 1;  // scale of the image
    var xLast = 0;  // last x location on the screen
    var yLast = 0;  // last y location on the screen
    var xImage = 0; // last x location on the image
    var yImage = 0; // last y location on the image

    // if mousewheel is moved
    $("#mosaicContainer").mousewheel(function(e, delta)
    {
        // find current location on screen 
        var xScreen = e.pageX - $(this).offset().left;
        var yScreen = e.pageY - $(this).offset().top;

        // find current location on the image at the current scale
        xImage = xImage + ((xScreen - xLast) / scale);
        yImage = yImage + ((yScreen - yLast) / scale);

        // determine the new scale
        if (delta > 0)
        {
            scale *= 2;
        }
        else
        {
            scale /= 2;
        }
        scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale);

        // determine the location on the screen at the new scale
        var xNew = (xScreen - xImage) / scale;
        var yNew = (yScreen - yImage) / scale;

        // save the current screen location
        xLast = xScreen;
        yLast = yScreen;

        // redraw
        $(this).find('div').css('-moz-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')')
                           .css('-moz-transform-origin', xImage + 'px ' + yImage + 'px')
        return false;
    });
});

Obviamente, você precisará adaptá-lo para usar a escala de tela e traduzir métodos.


Atualização 2: Acabei de perceber que estou usando a origem de transformação junto com a tradução. Consegui implementar uma versão que apenas usa escala e traduz por conta própria, confira aqui http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html Aguarde o download das imagens e use o seu roda do mouse para aumentar o zoom, também suporta pan, arrastando a imagem ao redor. Ele está usando transformações CSS3, mas você deve poder usar os mesmos cálculos para o seu Canvas.

Domingo Ironfoot
fonte
Eu finalmente resolvido, me levou 3 minutos, agora, depois de cerca de duas semanas de fazer outra coisa
csiz
O link Synday Ironfoot em sua atualização não está funcionando. Este link: dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html eu quero essa impelementação. Você pode postar aqui o código? obrigado
Bogz
2
a partir de hoje (set.2014) o link para MosaicTest.html está morto.
Chris
demonstração de mosaico se foi. Eu uso js baunilha geralmente e não jQuery. a que $ (isto) está se referindo? o document.body.offsetTop? Eu realmente quero ver a demonstração em mosaico que meu projeto foreverscape.com poderia realmente se beneficiar.
FlavourScape
2
A página de demonstração do mosaico é salva em archive.org: web.archive.org/web/20130126152008/http://…
Chris
9

Eu me deparei com esse problema usando c ++, que provavelmente não deveria ter acabado de usar matrizes OpenGL para começar ... de qualquer maneira, se você estiver usando um controle cuja origem é o canto superior esquerdo e desejar aplicar zoom / panorâmica como o Google Maps, aqui está o layout (usando o allegro como meu manipulador de eventos):

// initialize
double originx = 0; // or whatever its base offset is
double originy = 0; // or whatever its base offset is
double zoom = 1;

.
.
.

main(){

    // ...set up your window with whatever
    //  tool you want, load resources, etc

    .
    .
    .
    while (running){
        /* Pan */
        /* Left button scrolls. */
        if (mouse == 1) {
            // get the translation (in window coordinates)
            double scroll_x = event.mouse.dx; // (x2-x1) 
            double scroll_y = event.mouse.dy; // (y2-y1) 

            // Translate the origin of the element (in window coordinates)      
            originx += scroll_x;
            originy += scroll_y;
        }

        /* Zoom */ 
        /* Mouse wheel zooms */
        if (event.mouse.dz!=0){    
            // Get the position of the mouse with respect to 
            //  the origin of the map (or image or whatever).
            // Let us call these the map coordinates
            double mouse_x = event.mouse.x - originx;
            double mouse_y = event.mouse.y - originy;

            lastzoom = zoom;

            // your zoom function 
            zoom += event.mouse.dz * 0.3 * zoom;

            // Get the position of the mouse
            // in map coordinates after scaling
            double newx = mouse_x * (zoom/lastzoom);
            double newy = mouse_y * (zoom/lastzoom);

            // reverse the translation caused by scaling
            originx += mouse_x - newx;
            originy += mouse_y - newy;
        }
    }
}  

.
.
.

draw(originx,originy,zoom){
    // NOTE:The following is pseudocode
    //          the point is that this method applies so long as
    //          your object scales around its top-left corner
    //          when you multiply it by zoom without applying a translation.

    // draw your object by first scaling...
    object.width = object.width * zoom;
    object.height = object.height * zoom;

    //  then translating...
    object.X = originx;
    object.Y = originy; 
}
Aleksandr Albert
fonte
9

Gosto da resposta de Tatarize , mas darei uma alternativa. Esse é um problema trivial de álgebra linear, e o método que apresento funciona bem com panorâmica, zoom, inclinação, etc. Ou seja, funciona bem se sua imagem já estiver transformada.

Quando uma matriz é dimensionada, a escala está no ponto (0, 0). Portanto, se você tiver uma imagem e a dimensionar por um fator de 2, o ponto inferior direito dobrará nas direções x e y (usando a convenção de que [0, 0] é o canto superior esquerdo da imagem).

Se, em vez disso, você deseja ampliar a imagem no centro, a solução é a seguinte: (1) traduza a imagem de modo que seu centro esteja em (0, 0); (2) dimensionar a imagem pelos fatores x e y; (3) traduza a imagem de volta. ie

myMatrix
  .translate(image.width / 2, image.height / 2)    // 3
  .scale(xFactor, yFactor)                         // 2
  .translate(-image.width / 2, -image.height / 2); // 1

Mais abstratamente, a mesma estratégia funciona para qualquer ponto. Se, por exemplo, você deseja dimensionar a imagem em um ponto P:

myMatrix
  .translate(P.x, P.y)
  .scale(xFactor, yFactor)
  .translate(-P.x, -P.y);

E, finalmente, se a imagem já estiver transformada de alguma maneira (por exemplo, se for girada, inclinada, traduzida ou dimensionada), a transformação atual precisará ser preservada. Especificamente, a transformação definida acima precisa ser pós-multiplicada (ou multiplicada à direita) pela transformação atual.

myMatrix
  .translate(P.x, P.y)
  .scale(xFactor, yFactor)
  .translate(-P.x, -P.y)
  .multiply(myMatrix);

Aí está. Aqui está uma jogada que mostra isso em ação. Role com a roda do mouse sobre os pontos e você verá que eles permanecem consistentemente. (Testado apenas no Chrome.) Http://plnkr.co/edit/3aqsWHPLlSXJ9JCcJzgH?p=preview

avejidah
fonte
1
Devo dizer que, se você possui uma matriz de transformação afim, use-a com entusiasmo. Muitas matrizes de transformação terão até funções de zoom (sx, sy, x, y) que fazem exatamente isso. Quase vale a pena cozinhar um se você não tiver um para usar.
Tatarize 17/08/18
De fato, confesso que, no código em que usei essa solução, ela foi substituída por uma classe de matriz. E eu fiz exatamente isso várias vezes e criei classes de matrizes não menos que duas vezes. ( github.com/EmbroidePy/pyembroidery/blob/master/pyembroidery/… ), ( github.com/EmbroidePy/EmbroidePy/blob/master/embroidepy/… ). Se você quer algo mais complexo do que exatamente essas operações, uma matriz é basicamente a resposta correta e, depois de entender a álgebra linear, você percebe que essa resposta é realmente a melhor resposta.
Tatarize
6

Aqui está a minha solução para uma imagem orientada para o centro:

var MIN_SCALE = 1;
var MAX_SCALE = 5;
var scale = MIN_SCALE;

var offsetX = 0;
var offsetY = 0;

var $image     = $('#myImage');
var $container = $('#container');

var areaWidth  = $container.width();
var areaHeight = $container.height();

$container.on('wheel', function(event) {
    event.preventDefault();
    var clientX = event.originalEvent.pageX - $container.offset().left;
    var clientY = event.originalEvent.pageY - $container.offset().top;

    var nextScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale - event.originalEvent.deltaY / 100));

    var percentXInCurrentBox = clientX / areaWidth;
    var percentYInCurrentBox = clientY / areaHeight;

    var currentBoxWidth  = areaWidth / scale;
    var currentBoxHeight = areaHeight / scale;

    var nextBoxWidth  = areaWidth / nextScale;
    var nextBoxHeight = areaHeight / nextScale;

    var deltaX = (nextBoxWidth - currentBoxWidth) * (percentXInCurrentBox - 0.5);
    var deltaY = (nextBoxHeight - currentBoxHeight) * (percentYInCurrentBox - 0.5);

    var nextOffsetX = offsetX - deltaX;
    var nextOffsetY = offsetY - deltaY;

    $image.css({
        transform : 'scale(' + nextScale + ')',
        left      : -1 * nextOffsetX * nextScale,
        right     : nextOffsetX * nextScale,
        top       : -1 * nextOffsetY * nextScale,
        bottom    : nextOffsetY * nextScale
    });

    offsetX = nextOffsetX;
    offsetY = nextOffsetY;
    scale   = nextScale;
});
body {
    background-color: orange;
}
#container {
    margin: 30px;
    width: 500px;
    height: 500px;
    background-color: white;
    position: relative;
    overflow: hidden;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container">
    <img id="myImage" src="http://s18.postimg.org/eplac6dbd/mountain.jpg">
</div>

Chris
fonte
4

Aqui está uma maneira alternativa de fazer isso que usa setTransform () em vez de scale () e translate (). Tudo é armazenado no mesmo objeto. A tela é assumida como 0,0 na página, caso contrário você precisará subtrair sua posição das cordas da página.

this.zoomIn = function (pageX, pageY) {
    var zoomFactor = 1.1;
    this.scale = this.scale * zoomFactor;
    this.lastTranslation = {
        x: pageX - (pageX - this.lastTranslation.x) * zoomFactor,
        y: pageY - (pageY - this.lastTranslation.y) * zoomFactor
    };
    this.canvasContext.setTransform(this.scale, 0, 0, this.scale,
                                    this.lastTranslation.x,
                                    this.lastTranslation.y);
};
this.zoomOut = function (pageX, pageY) {
    var zoomFactor = 1.1;
    this.scale = this.scale / zoomFactor;
    this.lastTranslation = {
        x: pageX - (pageX - this.lastTranslation.x) / zoomFactor,
        y: pageY - (pageY - this.lastTranslation.y) / zoomFactor
    };
    this.canvasContext.setTransform(this.scale, 0, 0, this.scale,
                                    this.lastTranslation.x,
                                    this.lastTranslation.y);
};

Código de acompanhamento para lidar com o pan:

this.startPan = function (pageX, pageY) {
    this.startTranslation = {
        x: pageX - this.lastTranslation.x,
        y: pageY - this.lastTranslation.y
    };
};
this.continuePan = function (pageX, pageY) {
    var newTranslation = {x: pageX - this.startTranslation.x,
                          y: pageY - this.startTranslation.y};
    this.canvasContext.setTransform(this.scale, 0, 0, this.scale,
                                    newTranslation.x, newTranslation.y);
};
this.endPan = function (pageX, pageY) {
    this.lastTranslation = {
        x: pageX - this.startTranslation.x,
        y: pageY - this.startTranslation.y
    };
};

Para obter a resposta, considere que as mesmas coordenadas da página precisam corresponder às mesmas da tela antes e depois do zoom. Então você pode fazer alguma álgebra a partir desta equação:

(pageCoords - tradução) / scale = canvasCoords

Chade
fonte
3

Quero colocar aqui algumas informações para aqueles que desenham e movem separadamente a imagem e a aumentam.

Isso pode ser útil quando você deseja armazenar zooms e posição da janela de visualização.

Aqui está a gaveta:

function redraw_ctx(){
   self.ctx.clearRect(0,0,canvas_width, canvas_height)
   self.ctx.save()
   self.ctx.scale(self.data.zoom, self.data.zoom) // 
   self.ctx.translate(self.data.position.left, self.data.position.top) // position second
   // Here We draw useful scene My task - image:
   self.ctx.drawImage(self.img ,0,0) // position 0,0 - we already prepared
   self.ctx.restore(); // Restore!!!
}

Observe a escala DEVE ser a primeira .

E aqui está o zoomer:

function zoom(zf, px, py){
    // zf - is a zoom factor, which in my case was one of (0.1, -0.1)
    // px, py coordinates - is point within canvas 
    // eg. px = evt.clientX - canvas.offset().left
    // py = evt.clientY - canvas.offset().top
    var z = self.data.zoom;
    var x = self.data.position.left;
    var y = self.data.position.top;

    var nz = z + zf; // getting new zoom
    var K = (z*z + z*zf) // putting some magic

    var nx = x - ( (px*zf) / K ); 
    var ny = y - ( (py*zf) / K);

    self.data.position.left = nx; // renew positions
    self.data.position.top = ny;   
    self.data.zoom = nz; // ... and zoom
    self.redraw_ctx(); // redraw context
    }

e, é claro, precisaríamos de um arrastador:

this.my_cont.mousemove(function(evt){
    if (is_drag){
        var cur_pos = {x: evt.clientX - off.left,
                       y: evt.clientY - off.top}
        var diff = {x: cur_pos.x - old_pos.x,
                    y: cur_pos.y - old_pos.y}

        self.data.position.left += (diff.x / self.data.zoom);  // we want to move the point of cursor strictly
        self.data.position.top += (diff.y / self.data.zoom);

        old_pos = cur_pos;
        self.redraw_ctx();

    }


})
Vasiliy Stavenko
fonte
3
if(wheel > 0) {
    this.scale *= 1.1; 
    this.offsetX -= (mouseX - this.offsetX) * (1.1 - 1);
    this.offsetY -= (mouseY - this.offsetY) * (1.1 - 1);
}
else {
    this.scale *= 1/1.1; 
    this.offsetX -= (mouseX - this.offsetX) * (1/1.1 - 1);
    this.offsetY -= (mouseY - this.offsetY) * (1/1.1 - 1);
}
Daniel
fonte
2

Aqui está uma implementação de código da resposta de @ tatarize, usando PIXI.js. Eu tenho uma viewport olhando parte de uma imagem muito grande (por exemplo, estilo do Google Maps).

$canvasContainer.on('wheel', function (ev) {

    var scaleDelta = 0.02;
    var currentScale = imageContainer.scale.x;
    var nextScale = currentScale + scaleDelta;

    var offsetX = -(mousePosOnImage.x * scaleDelta);
    var offsetY = -(mousePosOnImage.y * scaleDelta);

    imageContainer.position.x += offsetX;
    imageContainer.position.y += offsetY;

    imageContainer.scale.set(nextScale);

    renderer.render(stage);
});
  • $canvasContainer é o meu contêiner html.
  • imageContainer é o meu contêiner PIXI que contém a imagem.
  • mousePosOnImage é a posição do mouse em relação à imagem inteira (não apenas à porta de visualização).

Aqui está como eu consegui a posição do mouse:

  imageContainer.on('mousemove', _.bind(function(ev) {
    mousePosOnImage = ev.data.getLocalPosition(imageContainer);
    mousePosOnViewport.x = ev.data.originalEvent.offsetX;
    mousePosOnViewport.y = ev.data.originalEvent.offsetY;
  },self));
Espelho318
fonte
0

Você precisa entender o espaço no mundo (ao contrário do espaço na tela) antes e depois do zoom e depois traduzir pelo delta.

mouse_world_position = to_world_position(mouse_screen_position);
zoom();
mouse_world_position_new = to_world_position(mouse_screen_position);
translation += mouse_world_position_new - mouse_world_position;

A posição do mouse está no espaço da tela, portanto você deve transformá-lo no espaço mundial. A transformação simples deve ser semelhante a esta:

world_position = screen_position / scale - translation
Enhex
fonte
0

você pode usar a função scrollto (x, y) para manipular a posição da barra de rolagem até o ponto que precisa ser mostrado após o zoom. Para encontrar a posição do mouse, use event.clientX e event.clientY. isso vai te ajudar

Mamo Ghandi
fonte
0

Uma coisa importante ... se você tem algo como:

body {
  zoom: 0.9;
}

Você precisa fazer a coisa equivalente na tela:

canvas {
  zoom: 1.1;
}
Lucas Moyano Angelini
fonte