Expo 2d-context How to to drawImage and get base64 data

[zelda09]

Please provide the following:

1. SDK Version: v40 latest
2. Platforms(Android/iOS/web/all): : Android
3. Add the appropriate “Tag” based on what Expo library you have a question on.

Am trying to use expo-2d-context lib in my react native app : GitHub - expo/expo-2d-context: A pure-js implementation of the W3C's Canvas-2D Context API that can be run on either Expo Graphics or WebGL However am unable to draw image on canva using drawImage function nor i can get base64 data via toDataURL function

so any idea how to draw image and get base64 data from canva.

sample code

import { GLView } from 'expo-gl';
import Expo2DContext from 'expo-2d-context';
import React from 'react';
import {Image} from 'react-native';
export default class App extends React.Component {
    render() {
        return (
          <GLView
            style={{ flex: 1 }}
            onContextCreate={this._onGLContextCreate}
          />
        );
    }
    _onGLContextCreate = (gl) => {
        var ctx = new Expo2DContext(gl);
        ctx.translate(50,200)
        ctx.scale(4,4)
        ctx.fillStyle = "grey";
        ctx.fillRect(20, 40, 100, 100);
        ctx.fillStyle = "white";
        ctx.fillRect(30, 100, 20, 30);
        ctx.fillRect(60, 100, 20, 30);
        ctx.fillRect(90, 100, 20, 30);
        ctx.beginPath();
        ctx.arc(50,70,18,0,2*Math.PI);
        ctx.arc(90,70,18,0,2*Math.PI);
        ctx.fill();
        ctx.fillStyle = "grey";
        ctx.beginPath();
        ctx.arc(50,70,8,0,2*Math.PI);
        ctx.arc(90,70,8,0,2*Math.PI);
        ctx.fill();
        ctx.strokeStyle = "black";
        ctx.beginPath();
        ctx.moveTo(70,40);
        ctx.lineTo(70,30);
        ctx.arc(70,20,10,0.5*Math.PI,2.5*Math.PI);
        ctx.stroke();
        
        // draw image
      var img = new Image();
      
      img.onload = () => {
        this.ctx.drawImage(img, 0, 0,  width,  height);
        this.ctx.flush();
        
        // get base64 image data
        var b64 = gl.toDataURL();
        
      };        
       img.src = "https://miro.medium.com/max/480/1*F6tkVg8eDXITOSA91Mh0kw.png";
    }
}

[wkozyra]

toDataUrl is a method that is on canvas object not on webgl context, I’m not sure if implementation from expo-2d-context supports it. If you want to take a snapshot of the current gl view you can use GLView - Expo Documentation

[zelda09]

thanks its useful i will give try snapshot of view is enough can be converted to base64 . .
do you have any idea how to draw image ? using this.ctx.drawImage(img, 0, 0, width, height);

its so sad they have not made any documentation for this lab , also all examples are of web side in html