Canvas 2d refreshing

[ODБOï]

hi,

I have adapted this little HTML/JS canvas example in QML/JS : https://codepen.io/martiansf/pen/jrOZPp?editors=1010

I just wanted to add a QML Timer that will randomize the variables and re-draw the thing, but my canvas is never refreshed , however the array containing the dots is refreshed
do you have an idea what i missed ?

import QtQuick 2.0
//reusable component so you can test
Canvas {
    id: mycanvas

    property int dotCount : 500
    property real lineWidth : 1
    property int variance : 50
    property int layoutRadius : 150
    property int w : width
    property int h : height
    property string clr: "#ffffff"
    property var  dotArray: []
    property var angInc :  360/dotCount
    property var _context
    on_ContextChanged: start()

    onPaint: {
        _context = getContext("2d");
    }

    Timer{
        interval: 1000
        running: true
        repeat: true
        onTriggered: {
            dotCount = Math.round(Math.random()*400)
            variance = Math.round(Math.random()*100)
              initDots()
        }
    }


    function start() {
        _context.lineWidth = lineWidth
        _context.strokeStyle = clr;
        _context.fillStyle = "#000";
        initDots();

    } //!start

    function initDots() {
        console.log("init dots")
        var da = []
        dotArray = da // clear old dots
        for (var i = 0; i < dotCount; i++) {
            var mdot = {i:i,x:layoutRadius * Math.cos((angInc *i) * (Math.PI/180))+ w/2,y:layoutRadius * Math.sin((angInc *i) * (Math.PI/180))+h/2}
            da.push(mdot)  
        }
        dotArray = da // the new dots array 
        drawDots();
    }//!initDots

    function drawDots(){
        console.log("draw dots")
        for(var i=0; i<dotArray.length; i++){
            var itm = dotArray[i];
            _context.beginPath();
            _context.arc(itm.x, itm.y, 1, 0, Math.PI*2, true);
            _context.fill();
        }
        connectDots();
    }//!drawDots

    function connectDots(){
        console.log("connect dots")
        var lineCount = Math.floor(dotArray.length/2);

        for(var i=0; i<lineCount; i++){
            var num = lineCount+i;
            var ptA = dotArray[i];
            var ptB = dotArray[num];
            _context.beginPath();
            _context.moveTo(ptA.x, ptA.y);
            _context.bezierCurveTo(Math.random()*variance,Math.random()*(Math.random()*variance),w/2,h/2.0,ptB.x,ptB.y);
            _context.stroke();


        }
    }//connectDots


}

[J.Hilk]

@LeLev
as far as I'm aware, you can only draw on the canvas inside the ònPaint` event and you try to do it outside of that, during the timeout event

to trigger a new onPaint event you can simply do the following

onTriggered: {
            dotCount = Math.round(Math.random()*400)
            variance = Math.round(Math.random()*100)
            mycanvas.requestPaint()
        }
....
      onPaint: {
              _context = getContext("2d");
              initDots()
          }

[ODБOï]

@J-Hilk said in Canvas 2d refreshing:

mycanvas.requestPaint()

nice thank you!