The Bezier Curve and fillText() (CANVAS) HTML

The Bezier Curve

You can create a bezier curves by using the path method, bezierCurveTo(). The following syntax can be used  to create a  bezier curve.

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

In the preceding syntax:
  • cp1x: Specifies the x-coordinate of the first control point.
  • cp1y: Specifies the y-coordinate of the first control point.
  • cp2x: Specifies the x-coordinate of the second Bezier control point.
  • cp2y: Specifies the y-coordinate of the second Bezier control point.
  • x: Specifies the x-coordinate of the ending point.
  • y: Specifies the y-coordinate of the ending point.

Consider the following code

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>
<TITLE> Bezier Curve</TITLE>
</HEAD>
<BODY>
<canvas id="gameCanvas" width="500" height="300" Style="border:1px solid black">
</canvas>
<SCRIPT>
var c=document.getElementById("gameCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(200,20);
ctx.bezierCurveTo(80,20,80,100,150,100);
ctx.stroke();
</SCRIPT>
</BODY>
</HTML>

Result

fillText()

The fillText() method is used to draw a text filled with a solid color on a canvas.  The default value for fillText() is black.
The following syntax can be used to draw a filled text:

fillText(text, x, y, width);

In the preceding syntax:

  • text: Specifies the text to be written on the canvas.
  • x: Specifies the x-coordinate of the starting point of the text.
  • y: Specifies the y-coordinate of the starting point of the text.
  • width: Specifies the width of the text.
Consider the following code for drawing a filled text on the canvas:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> fillText </TITLE>
</HEAD>
<BODY>
<canvas id="gameCanvas" width="500" height="300" Style="border:1px solid black">
</canvas>
<SCRIPT>
var c=document.getElementById("gameCanvas");
var ctx=c.getContext("2d");
ctx.font="15px Georgia";
ctx.fillText("Fill Text", 10, 60, 120);
ctx.font="15px Verdana";
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0" , "magenta");
gradient.addColorStop("0.5" , "blue");
gradient.addColorStop("1.0" , "red");
ctx.fillStyle=gradient;
ctx.fillText("Fill Text with Gradient", 10, 90, 120);
</SCRIPT>
</BODY>
</HTML>

Result:












About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment