CODEWITHSUNDEEP
htmlcanvassvg
Shi Nan
Shi Nan

Reputation: 1

How can I imitate the svg's gradientTransform in html5 canvas?

i'm now working on a project to convert svg to html5 canvas.

but i found there is no api for me to achieve the gradientTransform in canvas.

so i can not 100% convert them to look the same.

is there anyone know something about it?

Upvotes: 0

Views: 657

Answers (1)

Tim
Tim

Reputation: 1958

Well in fact when you are using Canvas gradient : createLinearGradient(float x0, float y0, float x1, float y1)

You can define x0 y0 and x1 y1 so for having a rotating gradient you can specify your start point like 0,0 and final like canvas.width,canvas.height

At the end it look like svg rotation(-45deg)

See this awesome cheat sheet for more informations : http://simon.html5.org/dump/html5-canvas-cheat-sheet.html

Also an untested method could consist to use canvas Transform when you draw your gradient : This tutorial is about Transform : https://developer.mozilla.org/fr/Tutoriel_canvas/Transformations

Upvotes: 1

Related Questions