pixiv5 Gradient Color Error

[Richardcsts]

please i need help!!

//Here is the gradient function
function Gradient(x, y, w, h, startColor, endColor){
    let p1 = x+100
    let p2 = y+50
    let p3 = x+w-100
    let p4 = y+h-80
    let cvs = document.createElement('canvas')
    cvs.width = window.innerWidth-20
    cvs.width = window.innerHeight-20
    let ctx = cvs.getContext('2d')
    let grd = ctx.createLinearGradient(p1, p2, p3, p4)
    grd.addColorStop(0, startColor)
    grd.addColorStop(1, endColor)
    ctx.fillStyle = grd
    ctx.fillRect(x, y, w, h)
    return new PIXI.Texture.from(cvs)
}

//This is the params
let x = 240
let y = 100
let h = 200
let w = 200

let a = new PIXI.Graphics()
.beginTextureFill(app.Gradient(x, y, w, h, '#ff0000', '#00ff00'))
.drawRect(x, y, w, h)
.endFill()

app.stage.addChild(a)

My output is this:
a red rectangle???, why?...

If i use this code in javascript without pixi.js

[Exca]

I'd assume it has something to do with the canvas being larger than what the drawing target is. When you start the texturefill it uses the 0,0 point of canvas as starting point and your graphic is starting only at 240,100. Draw the canvas with the size that you want to use the final graphics.

[ivan.popelyshev]

You use strange coordinates, why do you even need full-screen texture?

Just in case, there are two pixijs examples with gradient: https://pixijs.io/examples/#/textures/gradient-basic.js , https://pixijs.io/examples/#/textures/gradient-resource.js

Also make sure you understand difference between "graphics.position.set(100, 100); graphics.drawRect(0,0,10,10)" and "graphics.drawRect(100, 100, 10, 10)" - texture shift is different! In case if you cant set position somehow, you can pass offset matrix to beginTextureFIll.

To help you more, I need full case on jsfiddle, codepen or pixiplayground