send hidden graphic unmirrored

public/sketch.js

@@ -19,6 +19,8 @@ let camConfig = "user";
 let isOnMobile;
 let camIsON = false;
 
+let graphicsToSend;
+
 function isMobileDevice() {
     return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
 }
@@ -54,7 +56,9 @@ function call_api(socket, instructions){
     console.log("Calling API ... ")
     waiting = true;
     show_loading()
-    cnv_data = myCanvas.elt.toDataURL('image/png');
+    //cnv_data = myCanvas.elt.toDataURL('image/png');
+    graphicsToSend.loadPixels()
+    cnv_data = graphicsToSend.canvas.toDataURL('image/png');
     let data = [
         cnv_data,
         instructions
@@ -72,15 +76,19 @@ function windowResized() {
 
 function setup() {
     pixelDensity(1)
-    if(windowWidth < 500){
-        myCanvas = createCanvas(380, 380*320/576);
+    if(windowWidth <= 550){
+        resizeCanvas(390, 390*320/576);
+        graphicsToSend.resizeCanvas(myCanvas.width, myCanvas.height);
     } else {
-        myCanvas = createCanvas(576, 320);
+        resizeCanvas(576, 320);
+        graphicsToSend.resizeCanvas(myCanvas.width, myCanvas.height);
     }
     background(220)
     myCanvas.id('myCanvas')
     myCanvas.parent("canvas-container")
 
+    graphicsToSend = createGraphics(myCanvas.width, myCanvas.height)
+
     socket.on("api_response", (response) => {
         waiting = false;
         clearTimeout(timerWaiting)
@@ -238,6 +246,7 @@ function draw() {
     text('turn on your webcam', width/2, height/2);
     
     if(capture != undefined){
+      graphicsToSend.image(capture, 0, 0)
       if(!active_rearcam){
           push()
           //move image by the width of image to the left