react-native-canvas icon indicating copy to clipboard operation
react-native-canvas copied to clipboard

createPattern issue: black screen

Open ironmanromeo opened this issue 5 years ago • 1 comments

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';
    }

ironmanromeo avatar Aug 04 '19 09:08 ironmanromeo

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.

vikaskbh avatar Aug 13 '19 16:08 vikaskbh