Canvas Color

Colors are used to fill colors in shapes by using some properties such as fillStyle and strokeStyle. fillStyle property is used to fill color in shapes and strokeStyple property is used to fill outline color of shape. There are few types of color that are used to apply to shapes. The color types include color name, RGB (red green blue), Hex values, rgba (red green blue alpha).

Syntax

var variableName = canvas.getContext(2d);
variableName.fillStyle="colorName/rgb()/hex values";

Practice Task

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

• Use <canvas> element to draw canvas on webpage
• Assign id <color> to canvas element
• Give width and height of 100 100 respectivelly
• Use inline style to style canvas element
• Give border and to canvas using css styles
• Border should be 3px solid green
• Use javascript to draw any shape on canvas and apply strokeStyle to apply color to shape's outline

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