4. Program to demonstrate “StrokeText()” method using HTML Canvas.

kiri August 08, 2023

<!DOCTYPE html>

<html>

<body>

<h1>HTML5 Canvas</h1>

<h2>The strokeText() Method</h2>

const c = document.getElementById("myCanvas");

const ctx = c.getContext("2d"); #(drawing object in HTML)

ctx.font = "20px Georgia";

ctx.strokeText("Hello World!", 10, 50);

ctx.font = "30px Verdana";

// Create gradient

var gradient = ctx.createLinearGradient(0, 0, c.width, 0); #(x1,y1,x2,y2)

gradient.addColorStop("0", "magenta"); #(numeric value-0 to 1,name)

gradient.addColorStop("0.5", "blue");

gradient.addColorStop("1.0", "red");

// Fill with gradient

ctx.strokeStyle = gradient;

ctx.strokeText("Big smile!", 10, 90);

</script>

</body>

</html>

code\kiri