CODEWITHSUNDEEP
canvasvue.js
noel
noel

Reputation: 1

Resize Vue.js canvas element

I am implementing animation using webgl in the Vue.js project. Since scrolling causes the animation to branch, we initialize the size of the canvas-element as document.body.clientHeight.

function initialize(){

    canvas = document.getElementById('metaball-canvas');
    console.log(document.body.clientHeight);
    canvas.width = window.innerWidth;
    canvas.height = document.body.clientHeight;
    var glConfig = {
        premultipliedAlpha: true,
        antialias: true,
        depth:true,
        alpha: true
    }

    gl = canvas.getContext('webgl', glConfig) || canvas.getContext('experimental-webgl', glConfig);

    if(!gl){
        console.error('cannot find gl', gl);
        return;
    }
    ...

However, although there is no problem on the top page, if you switch to another page, the height acquired first will be inherited, exceeding the original page height. In order to avoid this problem, what kind of means should be taken to re-render canvas-element?

Upvotes: 0

Views: 735

Answers (1)

Jackson Baker Ryan
Jackson Baker Ryan

Reputation: 46

Vue instances have a force update method that you could call when your user navigates to a different page.

var vm = new Vue({
  el: '#canvas',
  data: data
})

function pageChangeHandler() {
    vm.$forceUpdate();
}

Upvotes: 1

Related Questions