react-native-canvas
react-native-canvas copied to clipboard
createPattern issue: black screen
Hi everyone. I'm afraid I discovered an error. I can't create a pattern: I get a completely black area. If I call the "drawImage" command everything works properly (but I need a pattern). The strange thing is that using the same commands in the web version everything works. What am I doing wrong?
// JSX
<Canvas style={{backgroundColor:'green', width:100, height:100}} key="1" ref={ref=>this.canvas1 = ref}/>
// JS
handleCanvas1 = () => {
const image = new CanvasImage(this.canvas1);
this.canvas1.width = 100
this.canvas1.height = 100
const ctx = this.canvas1.getContext('2d');
image.addEventListener('load', async () => {
const pattern = await ctx.createPattern(image, 'no-repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 300, 300);
//ctx.drawImage(image, 0, 0, 100, 100)
});
image.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
}
Yes it's bug.
context.fillStyle=color|gradient|pattern;
We use,
createPattern(image, 'no-repeat');
However, in index.d.ts it's defined like,
createPattern: () => void;
by default, it returns only #000
For createPattern, after resolving promise it returns some some {webview element}
.
FillStyle = gradient also not working.
However my purpose solved without pattern and simple image blending.