Canvas is not updating even after setting interval

Question

as the topic states. I have set the interval to give JavaScript a chance to update my canvas but it just won't. I am not experience with it, but the variables I am "checking" (tried switch but that just breaks) have correct values - they are returned through a flask-socketio websocket on the serverside using a 3rd partylibrary.

The code is shown below, the variables are "global" so they should be in the same scope, I am not sure about the if statements, maybe they just do not work like that in JS? I had trouble using switch for unknown reasons to me (I usually code in C or Python or C++...)

I suspect that my fillstyle just doesn't change, I just don't know why.

Edit: Tried to minimize the code a bit.

Edit 2: The variable "af3_level" that's supposed to have some influence on the fillstyle is changed every 1 second, then send over the socket (it's values are 100% correct).

Edit 3: The problem was "typo" (or maybe not a typo). It is fillStyle, not fillstyle.

<script type="text/javascript" charset="utf-8">
    var af3_level;
    $(document).ready(function() {            
        namespace = '/emotiv';
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
        socket.on('connect', function() {
            socket.emit('my_emo_event', {data: 'I\'m connected to emotiv_info'});
        });            
        socket.on('emotiv_response', function(msg) {
            $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
        });
        socket.on('emo_headgear_data', function(msg) {
          af3_level = msg.af3;
          $('#emotiv_log').html("some text" + af3_level);
          //draw();
        });            
        $('form#emotiv_connect').submit(function(event) {
            socket.emit('emotiv_connect');
            return false;
        });
        $('form#emotiv_disconnect').submit(function(event) {
            socket.emit('emotiv_disconnect');
            return false;
        });
    });
    var canvas_handle=document.getElementById("connection_quality_canvas");
    var ctx = canvas_handle.getContext("2d");
    setInterval(drawSomething, 1000);
    function drawSomething(){
      ctx.clearRect(0,0,canvas_handle.width,canvas_handle.height);
      ctx.beginPath()
      ctx.arc(250,250,250,0,2*Math.PI);
      ctx.stroke();
      ctx.beginPath()
      ctx.moveTo(250,0);
      ctx.lineTo(250,500);
      ctx.stroke();
      ctx.beginPath()
      ctx.moveTo(0,250);
      ctx.lineTo(500,250);
      ctx.stroke();
      //AF3
      ctx.beginPath()
      ctx.moveTo(150,55);
      ctx.arc(125,55,25,0,2*Math.PI);
      if(af3_level == 1) {
        ctx.fillstyle = "red";
      }
      else if(af3_level == 2) {
        ctx.fillstyle = "yellow";
      }
      else if(af3_level == 4) {
        ctx.fillstyle = "green";
      }
      else {
        ctx.fillstyle = "black";
      }
      ctx.fill();
      ctx.stroke();
    }
</script>

Answer 1

Here is an almost minimal example that hopefully will help you. See comments in code for information.

 // Declaring global variables var canvas_handle, ctx; // Declaring global functions function drawSomething(){ var posX = Math.floor(Math.random()*canvas_handle.width), posY = Math.floor(Math.random()*canvas_handle.height), level = Math.floor(Math.random()*3), style; ctx.clearRect(0,0,canvas_handle.width,canvas_handle.height); ctx.beginPath() ctx.moveTo(0,0); ctx.lineTo(posX,posY); ctx.lineTo(posX + 10 ,posY + 20); ctx.closePath(); // This is how a switch-statement looks like: switch (level) { case 0 : style = '#f00'; break; case 1 : style = '#ff0'; break; case 2 : style = '#0f0'; break; default: style = '#000'; } // Notice that the names are lineWith, strokeStyle, fillStyle, and not linewidth, strokestyle or filestyle. ctx.lineWidth=1; ctx.strokeStyle = '#888'; ctx.fillStyle = style; ctx.fill(); ctx.stroke(); } $(document).ready(function() { // Running this code when the document has been loaded and // the elements are availible. canvas_handle=document.getElementById("connection_quality_canvas"); ctx = canvas_handle.getContext("2d"); setInterval(drawSomething, 500); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="connection_quality_canvas" width="500" height="200" /> 

Answer 2

try

window.setInterval(function(){
    //your code
}, YOUR_INTERVAL_TIME_IN_MS);