How to make ZDog responsive?

[CHENXINNN]

I saw this Demo by Chris Gannon: https://codepen.io/chrisgannon/pen/PvVzRG The ZDog in this demo is responsive. I went through the code and I didn't found which part of code made it responsive... Can someone tell me which part of code make the demo responsive? Thank you!

[desandro]

Chris Gannon's demo is using <svg> with fluid CSS

.zdog-svg {
    width: 100%;
    height: 100%;
}

However, Zdog does offer resize: 'fullscreen' option on Illustration that works for both canvas & SVG.

[CHENXINNN]

Hi Dave, thank you for your reply! The docs illustrated this very clear actually...so my previous problem was solved, but now I got another problem: It seem that the onResize callback function only works when resize is set to fullscreen, the width and height parameters in the onResize function will be automatically set to the value of window.innerWidth and window.innerHeight. What if I don't want a fullscreen canvas, is it still possible to make it responsive?

[jackrugile]

@CHENXINNN Hey, just wanted to mention that we came to a conclusion and Dave found a bug regarding high pixel density screens. Feel free to follow here: #41

I think once that's fixed, that should handle your situation as well.

[desandro]

@CHENXINNN v1.0.2 has been released that fixed a bug with resize: true for high pixel ratio displays

[CHENXINNN]

@desandro Hi~ I forked the canvas resize demo from the docs and changed its version to v1.0.2: https://s.codepen.io/chenxinnn/debug/ZNPBVB/xJkjOqJPadKM It seems that when I change the width of the window, it is responsive, but when I change the height, it not working yet.

[desandro]

<canvas> works just like <img>. If you want to scale the canvas proportionally with the viewport, you can do so with CSS.

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
}

.zdog-canvas {
  display: block;
  height: 100%;
}

See demo https://codepen.io/desandro/pen/f2f29ebd5b910a83929dc756a67e9c46

Otherwise, if you want to resize the canvas or SVG to match the size of the viewport, use resize: 'fullscreen'.