search

tdewolff / canvas

Cairo in Go: vector to raster, SVG, PDF, EPS, WASM, OpenGL, Gio, etc.
MIT License
1.52k stars 103 forks source link

Gradient + WASM #321

Open icebird72 opened 2 weeks ago

icebird72 commented 2 weeks ago

Hello! It seems that LinearGradient is not supported when rendering WASM. This can also be seen in the live demo: https://tdewolff.github.io/canvas/examples/html-canvas/index.html "Stroke" stroke without gradient, although your demo code for output is as follows:

// Draw the word Stroke being stroked
gradient := NewRadialGradient(Point{120.0, 5.0}, 0.0, Point{140.0, 5.0}, 60.0)
gradient.Add(0.0, Turquoise)
gradient.Add(1.0, Red)
ctx.SetFillGradient(gradient)

face = fontLatin.Face(80.0)
p, _, _ := face.ToPath("Stroke")
ctx.DrawPat
h(100, 5, p.Stroke(0.75, RoundCap, RoundJoin, Tolerance))

At the same time, the result in the browser is as follows:

Xnip2024-11-05_17-25-53

Noticed when trying to fill the Path with a gradient (Linear or Radial) and displaying it in WASM. At the same time, the same code, when saved in PNG, creates a gradient absolutely correctly. Thanks! Regards, Dmitry

tdewolff commented 2 weeks ago

Thanks for raising the issue. Gradients are not supported yet in HTMLCanvas, but they're quite trivial to implement. Let me see if I can implement it this week.