Affiliate link
HTML - Canvas
Canvas element is used by JavaScript to draw graphics.
HTML Canvas - Draw shapes
Syntax - arcarc(x, y, radius, startAngle, endAngle)
arc(x, y, radius, startAngle, endAngle, counterclockwise)
<canvas id="myCanvas1" style="width: 200px; height: 100px; border: 1px solid black;"></canvas>
<script>
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Code result
HTML Canvas - Write text
Syntax - fillTextfillText(text, x, y)
fillText(text, x, y, maxWidth)
<canvas id="myCanvas2" style="width: 200px; height: 100px; border: 1px solid black;"></canvas>
<script>
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.font = '30px serif';
ctx.fillText('LearnCodeNow', 10, 50);
</script>
Code result
Affiliate link
HTML Canvas - Background(Linear Gradient)
Syntax - createLinearGradientcreateLinearGradient(x0, y0, x1, y1)
<canvas id="myCanvas3" style="width: 200px; height: 100px; border: 1px solid black;"></canvas>
<script>
var c = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
var grad = ctx.createLinearGradient(20,0, 220,0);
grad.addColorStop(0, "red");
grad.addColorStop(1, "white");
ctx.fillStyle = grad;
ctx.fillRect(20, 20, 200, 100);
</script>
Code result
Affiliate link
Affiliate link
