How can I create a button to draw with gradient?

Question

https://code.sololearn.com/WB0OWKdoPrmh/?ref=app

Answer 1

for that you need to gradually switch color of the brush on each stroke

Answer 2

if you want to change the canvas background here's how i did it one of my codes

you can play around with the randomCanvasColor function for different results

all it does is build a random string with a new gradient style

var canvas = document.getElementById("canvas");

function randomCanvasColor(){
canvas.style.background = "linear-gradient("+randColor()+","+randColor()+","+randColor()+","+randColor()+","+randColor()+")";
}

function randColor(){
// generates random color string
var vec="0123456789abcdef";
var color="#";
for(var i=0;i<6;i++){
color+=vec[randVal(0,vec.length-1)];
}
return color;
}

Answer 3

If you want to draw line in gradient color, use createLinearGradient function to create strokeStyle first.

https://code.sololearn.com/Wu6PXIR28ht8/?ref=app

Answer 4

I wanted to paint with gradient