Unsolved Draw png with canvas
-
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()
-
any idea?
understand my request?