Draw png with canvas

kickoune103

i would like draw a shape with two bezier curve, for create bar gauge editable. Between the two curve, this area must be transparency.(to have background compatibility) And a rectangle opaque can be draw in this shape for set the value of gauge. I want to see is possible for not use image like PNG but draw PNG with canvas.

example

example with rect with/2 in source-atop. when the area in full transparency the rect in 'source-a-top' or 'source-in' is not visible. why? is possible to have area full transparency but visible? ctx.fillStyle = Qt.rgba(255, 255, 255, 0)==> not work

it's work when the area is not fully opaque. ctx.fillStyle = Qt.rgba(255, 255, 255, 0.5) ==>work but is not the color of background.

i would like area full transparency and on the top, just in this area, rect opaque.

https://jsfiddle.net/tg5zwnc2/1/

`if you create area with fillStyle (ct.fillStyle = 'rgba(255, 255, 255, 0)')
the final rectangle on the top is not visible, but is fully opaque and on the top.

//your code here

var ct = cv.getContext('2d');
var courbeBezier =  [] 


courbeBezier.push([ ])
courbeBezier[courbeBezier.length-1].push({x:cv.width,y:10}) //origine
courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:60 }) //control 1
courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:70 }) //control 2
courbeBezier[courbeBezier.length-1].push({x:10,y:cv.height-10 }) //end

courbeBezier.push([ ])
courbeBezier[courbeBezier.length-1].push({x:0,y:cv.height}) //origine
courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:10}) //control 1
courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:20 }) //control 2
courbeBezier[courbeBezier.length-1].push({x:cv.width,y:10}) //end

ct.beginPath()

//if you using this, ok
ct.fillStyle = 'yellow'//rgba(255, 255, 255, 0.1)'

//if you using this, the final rec is not visible on the top
//ct.fillStyle = 'rgba(255, 255, 255, 0)'

ct.moveTo(courbeBezier[0][0].x,courbeBezier[0][0].y)
for (var i =0;i<courbeBezier.length;i++)
{
if (i>0)                            
ct.lineTo(courbeBezier[i][0].x,courbeBezier[i][0].y)

ct.bezierCurveTo(courbeBezier[i][1].x, courbeBezier[i][1].y, courbeBezier[i][2].x,courbeBezier[i][2].y, courbeBezier[i][3].x,courbeBezier[i][3].y)


if (i>0)
ct.lineTo(courbeBezier[i-1][0].x,courbeBezier[i-1][0].y)


}
ct.stroke()
ct.fill()

ct.beginPath()
ct.globalCompositeOperation = "source-atop";
ct.fillStyle = "red";
ct.fillRect(0,0,cv.width/2,cv.height)
ct.fill()

kickoune103

any idea?
understand my request?