how to load image to canva from another function

[darkworks]

so this is example from repo home page

import React, { Component } from 'react';
import Canvas from 'react-native-canvas';

class App extends Component {

  handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 100, 100);
  }

  render() {
    return (
      <Canvas ref={this.handleCanvas}/>
    )
  }
}

so in my app i have button which create qr code and return me base64 image data so how i can write that base64 image data when qr code is generated to that above canva ?

thanks

[James-Firth]

Example pseudo code

// create a canvas image with using the canvas you're going to draw on.
// NOTE if you try and draw this image on another canvas it will error
const myCanvasImage = new CanvasImage(canvas);
myCanvasImage.src = 'mybase64string';
// set up a callback for once the image is loaded
myCanvasImage.addEventListener('load', () => {
// loaded! now you can draw, etc.
context.DrawImage(myCanvasImage,0,0);
});

[darkworks]

@James-Firth thanks for the help however am getting error Image must be initialized with a Canvas instance

here is my code am trying to draw when app is loaded like using btn calling my function. however this lib seems only work to load image canva on app boot i mean u cant modify or redraw something on canva ?

import React, { Component } from 'react';
import {Image, Button, ScrollView, StatusBar, View, StyleSheet} from 'react-native';

import Canvas, {Image as CanvasImage, Path2D, ImageData} from 'react-native-canvas';

class App extends Component {
	
    constructor() {
        super();
		this.canvas = null;
		this.ctx = null;
		
		} // constrcut end 		
  
   handleImageRect(canvas) {
if(canvas){
	this.canvas = canvas;
    const image = new CanvasImage(canvas);
    this.canvas.width = 100;
    this.canvas.height = 100;

    const context = this.canvas.getContext('2d');
	this.ctx = context;

    image.src = 'https://upload.wikimedia.org/wikipedia/commons/6/63/Biho_Takashi._Bat_Before_the_Moon%2C_ca._1910.jpg';
    image.addEventListener('load', () => {
      context.drawImage(image, 0, 0, 100, 100);
    });
}
  }
  
  
  draw_it(){
	console.log("drawing ...");
	const image2 = new CanvasImage(this.canvas);
    this.canvas.width = 100;
    this.canvas.height = 100;  
	  
	const context2 = this.ctx;  
	this.ctx.clearRect(0, 0, 100, 100);
	
    image2.src = 'https://miro.medium.com/max/480/1*F6tkVg8eDXITOSA91Mh0kw.png';
    image2.addEventListener('load', () => {
      context2.drawImage(image2, 0, 0, 100, 100);
	  console.log("drawing ...done");
    });	
	
  }
  
  

  render() {
    return (
	<View>
      <Canvas ref={this.handleImageRect}/>
	<Button title="Draw it" onPress={async () => {this.draw_it()}} />
	</View>
    )
  }
}
export default App;

[James-Firth]

@darkworks Just took a quick skim, in draw_it you don't have a check to ensure this.canvas is not null, might be worth adding?

Also I know the image must be drawn on the same canvas it is initialized on, otherwise you'll get an odd error. Maybe grabbing context2 is causing some issues?