Canvas Radial-Gradient

Radial gradient is a color pattern that is used to extends circulary from an inner color outwards to one or more other colors. createRadialGradient(x1,y1,r1,x2,y2,r2) method is used to create radial gradient. the parameters represent two circles, one with its center at (x1,y1) and a radius of r1 and the other with its center at (x2,y2) with radius of r2.

addColorStop(position,color)

addcolorStop method is used create a new color stop on the gradient object created by createRadialGradient method. The parameter position in addColorStop method is a number between 0.0 to 1.0 and defines the relative position of color in a gradient and color is css color values, multiple color stops can be added in gradient.

Syntax

var variableName = canvas.getContext(2d);
variableName.createRadialGradient(x1,x2,r1,y1,y2,r2);

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <canvas> element to draw canvas on webpage
• Assign id <radialG> to canvas element
• Give width and height of 250 250 respectivelly
• Use inline style to style canvas element
• Give border and to canvas using css styles
• Border should be 3px solid purple
• Use javascript to draw radial gradient on canvas, apply any number of colors

save file with name task.html or task.htm and then open it using any browser and see results.