I am running a processing js program in a webpage, using the canvas to draw my game. I have overwritten some of the functions in javascript so I can use degrees as an input to the processing js functions.

This works perfectly, and allows me to input degrees for my arcs. The only time it does not work, however, is after I resize the canvas when the window is resized. It seems to switch back to using radians for the arc. Why is this? What implications does resizing the canvas suddenly create when it is done by the user?

<script>
  
var canvas = document.getElementById("canvas");
var processing = new Processing(canvas, function(processing) {
    
    var aspectRatio = {
        xFactor: 16,
        yFactor: 9
    };
    
    resizeCanvas = function() {
        var gameCanvas = {
            x: 0,
            y: 0,
            w: aspectRatio.xFactor,
            h: aspectRatio.yFactor
        };
        var resizing = true;
        while(resizing === true){
            gameCanvas.w++;
            gameCanvas.h=gameCanvas.w*(aspectRatio.yFactor/aspectRatio.xFactor);
            if(gameCanvas.w>=window.innerWidth||gameCanvas.h>=window.innerHeight){
                resizing = false;
            }
        }
        
        processing.size(gameCanvas.w,gameCanvas.h);
        
    }
  
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas, false);
    processing.background(0xFFF);

    var arcFn = processing.arc;
    processing.arc = function(x,y,w,h,startAngle,stopAngle) {
        return arcFn(x,y,w,h,processing.radians(startAngle),processing.radians(stopAngle));
    }
    var showAdd = false;
    
    with (processing) {

        //Processing js code and program:

I tried re-overwriting the arc function everytime the canvas is resized with the window, but this caused the whole game to not work.

Any ideas for why this may be is appreciated.