Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to apply a linear gradient on canvas

See original GitHub issue

<Canvas paint={painter => painter .path('M0,0L0,300L300,300Z') .linearGradient(1027.1464, 926.855, 1790.4744, 662.7968) .stop(0, 'green') .stop(1, 'red') } style={styles.square} />

Schermafbeelding 2020-02-20 om 13 12 10

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:8 (2 by maintainers)

Top GitHub Comments

1reaction

Alaridcommented, Jul 19, 2022

Same here. Is there no way to have a linear-gradient background on an element? I have been looking for a way to do this for hours, can’t find anything

1reaction

rhysflookcommented, Jan 8, 2022

I am having this same issue with .stop() in the latest version.

Top Results From Across the Web

HTML canvas createLinearGradient() Method - W3Schools

The createLinearGradient() method creates a linear gradient object. The gradient can be used to fill rectangles, circles, lines, text, etc. Tip: Use this ......

CanvasRenderingContext2D.createLinearGradient() - Web APIs

This example initializes a linear gradient using the createLinearGradient() method. Three color stops between the gradient's start and end ...

How can I plot a gradient line in HTML canvas? - Stack Overflow

Yes. Example: // linear gradient from start to end of line var grad= ctx.createLinearGradient(50, 50, 150, 150); grad.addColorStop(0, "red"); grad.

HTML5 Canvas Reference - createLinearGradient()

Linear gradients come in three basic styles: horizontal, vertical, and diagonal. We control where colors change in our gradient by setting color stops...

HTML5 Canvas : Gradients and Patterns tutorial - w3resource

Gradients consist of continuously smooth color transitions along a vector from one color to another, possibly followed by additional transitions ...