August 9, 2022

WeAnswer

The complete guide to the beginners as well as to the experienced Web Developers

The canvas element is the actual DOM node that’s embedded in the HTML page, The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element.

Result


Property

context.fillStyle=”#FF0000″;
context.fillRect(20,20,150,100);

context.strokeStyle=”#FF0000″;
context.lineWidth=5;
context.strokeRect(20,20,150,100);

context.shadowBlur=20;
context.shadowColor=”black”;

context.shadowBlur=10;
context.shadowOffsetX=20;
context.shadowColor=”black”;

context.shadowBlur=10;
context.shadowOffsetY=20;
context.shadowColor=”black”;

var grd=context.createLinearGradient(0,0,170,0);
grd.addColorStop(0,”black”);
grd.addColorStop(1,”white”);

var grd=context.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);