0

I am trying to use particles.js, I never used the HTML5 canvas before honestly, I just need a fast fix for now, so I am using a library called vue-particles for an easy integration and usage of particles.js in a Vue.js application, I got it up and running perfectly fine, the issue arises when I decrease the screen width, so on my laptop screen that is 1364px wide and above, there are no issues, when it goes down to tablets and mobile screen sizes, the canvas covers only 50% of the height of its parent component, I tried targeting the canvas element and adjusting its height to 100%, but it either doesn't work at all, or it covers the entire page instead of its parent element only. so I would appreciate if someone help me out with that.

this is how I used it in my .vue component

<template>
 <div class="parent">
  <div id="particles">
   <vue-particles color="dedede" :particlesNumber="40"></vue-particles>
  </div>
 </div>
</template>

If you need further code or information to clarify the issue, Please leave it in a comment below,

thanks in advance.

MoSwilam
  • 824
  • 2
  • 10
  • 26
  • 1
    as far as i know, canvas size must be set in pixels, perhaps you should resize your canvas manually https://stackoverflow.com/questions/18679414/how-put-percentage-width-into-html-canvas-no-css – danielarend Dec 28 '18 at 20:22
  • Yeah man that worked with some media queries, thanks a lot :) – MoSwilam Dec 31 '18 at 08:43

0 Answers0