HTML5 Canvas Zooming

Question

Is there any easy way how to zoom in and back out in canvas  JavaScript   Basically I have a 400x400px canvas and I d like to be able to zoom in with  mousedown   2x  and go back with  mouseup    Spent last two days googling  but no luck so far

User · Answer

Canvas zoom and pan  x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D   x000D   lt canvas id  myCanvas  width    height    x000D  style  border 1px solid  d3d3d3   gt  x000D  Your browser does not support the canvas element  x000D   lt  canvas gt  x000D   x000D   lt script gt  x000D  console log  canvas   x000D  var ox 0 oy 0 px 0 py 0 scx 1 scy 1  x000D  var canvas   document getElementById  myCanvas    x000D  canvas onmousedown  e   gt  px e x py e y canvas onmousemove  e   gt  ox-  e x-px  oy-  e y-py  px e x py e y      x000D   x000D  canvas onmouseup     gt  canvas onmousemove null   x000D  canvas onwheel   e   gt  let bfzx bfzy afzx afzy  bfzx bfzy  StoW e x e y  scx- 10 scx e deltaY scy- 10 scy e deltaY  x000D   afzx afzy  StoW e x e y   x000D  ox   bfzx-afzx   x000D  oy   bfzy-afzy   x000D    x000D  var ctx   canvas getContext  2d    x000D   x000D  function draw    x000D  window requestAnimationFrame draw   x000D  ctx clearRect 0 0 canvas width canvas height   x000D  for let i 0 i lt  100 i  10   x000D  let sx 0 sy i  x000D  let ex 100 ey i  x000D   sx sy  WtoS sx sy   x000D   ex ey  WtoS ex ey   x000D  ctx beginPath    x000D  ctx moveTo sx  sy   x000D  ctx lineTo ex  ey   x000D  ctx stroke    x000D    x000D  for let i 0 i lt  100 i  10   x000D  let sx i sy 0  x000D  let ex i ey 100  x000D   sx sy  WtoS sx sy   x000D   ex ey  WtoS ex ey   x000D  ctx beginPath    x000D  ctx moveTo sx  sy   x000D  ctx lineTo ex  ey   x000D  ctx stroke    x000D    x000D    x000D  draw   x000D  function WtoS wx wy   x000D  let sx  wx-ox  scx  x000D  let sy  wy-oy  scy  x000D  return sx sy   x000D    x000D  function StoW sx sy   x000D  let wx sx scx ox  x000D  let wy sy scy oy  x000D  return wx wy   x000D    x000D   x000D   lt  script gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

One option is to use css zoom feature        canvas id   css  zoom   x

User · Answer

Just try this out    lt  DOCTYPE HTML gt   lt html gt       lt head gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery js  gt  lt  script gt           lt style gt              body                   margin  0px                  padding  0px                              wrapper                   position  relative                  border  1px solid  9C9898                  width  578px                  height  200px                              buttonWrapper                   position  absolute                  width  30px                  top  2px                  right  2px                             input type                button                     padding  5px                  width  30px                  margin  0px 0px 2px 0px                         lt  style gt           lt script gt              function draw scale  translatePos                   var canvas   document getElementById  myCanvas                    var context   canvas getContext  2d                        clear canvas                 context clearRect 0  0  canvas width  canvas height                    context save                    context translate translatePos x  translatePos y                   context scale scale  scale                   context beginPath       begin custom shape                 context moveTo -119  -20                   context bezierCurveTo -159  0  -159  50  -59  50                   context bezierCurveTo -39  80  31  80  51  50                   context bezierCurveTo 131  50  131  20  101  0                   context bezierCurveTo 141  -60  81  -70  51  -50                   context bezierCurveTo 31  -95  -39  -80  -39  -50                   context bezierCurveTo -89  -95  -139  -80  -119  -20                   context closePath       complete custom shape                 var grd   context createLinearGradient -59  -100  81  100                   grd addColorStop 0    8ED6FF       light blue                 grd addColorStop 1    004CB3       dark blue                 context fillStyle   grd                  context fill                     context lineWidth   5                  context strokeStyle     0000ff                   context stroke                    context restore                               window onload   function                    var canvas   document getElementById  myCanvas                     var translatePos                         x  canvas width   2                      y  canvas height   2                                     var scale   1 0                  var scaleMultiplier   0 8                  var startDragOffset                       var mouseDown   false                      add button event listeners                 document getElementById  plus   addEventListener  click   function                        scale    scaleMultiplier                      draw scale  translatePos                      false                    document getElementById  minus   addEventListener  click   function                        scale    scaleMultiplier                      draw scale  translatePos                      false                       add event listeners to handle screen drag                 canvas addEventListener  mousedown   function evt                       mouseDown   true                      startDragOffset x   evt clientX - translatePos x                      startDragOffset y   evt clientY - translatePos y                                       canvas addEventListener  mouseup   function evt                       mouseDown   false                                       canvas addEventListener  mouseover   function evt                       mouseDown   false                                       canvas addEventListener  mouseout   function evt                       mouseDown   false                                       canvas addEventListener  mousemove   function evt                       if  mouseDown                            translatePos x   evt clientX - startDragOffset x                          translatePos y   evt clientY - startDragOffset y                          draw scale  translatePos                                                              draw scale  translatePos                                 jQuery document  ready function                       wrapper   mouseover function e                         status   html e pageX        e pageY                                                 lt  script gt       lt  head gt       lt body onmousedown  return false   gt           lt div id  wrapper  gt               lt canvas id  myCanvas  width  578  height  200  gt               lt  canvas gt               lt div id  buttonWrapper  gt                   lt input type  button  id  plus  value     gt  lt input type  button  id  minus  value  -  gt               lt  div gt           lt  div gt           lt h2 id  status  gt          0  0          lt  h2 gt       lt  body gt   lt  html gt    Works perfect for me with zooming and mouse movement   you can customize it to mouse wheel up  amp  down  Njoy     Here is fiddle for this Fiddle

User · Answer

IIRC Canvas is a raster style bitmap  it wont be zoomable because there s no stored information to zoom to   Your best bet is to keep two copies in memory  zoomed and non  and swap them on mouse click

User · Answer

Building on the suggestion of using drawImage you could also combine this with scale function   So before you draw the image scale the context to the zoom level you want   ctx scale 2  2     Doubles size of anything draw to canvas    I ve created a small example here http   jsfiddle net mBzVR 4  that uses drawImage and scale to zoom in on mousedown and out on mouseup

User · Answer

If you have a source image or canvas element and your 400x400 canvas you want to draw into you can use the drawImage method to achieve zooming   So for example  the full view might be like this  ctx drawImage img  0  0  img width  img height  0  0  canvas width  canvas height    And a zoomed view might be like this  ctx drawImage img  img width   4  img height   4  img width   2  img height   2  0  0  canvas width  canvas height    The first parameter to drawImage is the image element or canvas element to draw  the next 4 are the x  y  width and height to sample from the source and the last 4 parameters are the x  y  width and height of the region to draw in the canvas  It will then handle the scaling for you   You would just need to pick the width and height for the source sample based on the zoom level and the x and y based on where the mouse is clicked minus half the calculated width and height  but you will need to ensure the rectangle isn t out of bounds

[javascript] HTML5 Canvas: Zooming

Examples related to javascript

Examples related to canvas