Loading Please Wait...
HTML Canvas is used to draw graphics on the HTML document with the help of JavaScript.
<canvas> element is the main container for canvas graphics. The actual graphics are drawn with JavaScript using various methods like, paths, text, image, boxes, etc.
A <canvas> element is just an empty rectangular (square) container without any style or graphics.
<canvas id="exampleCanvas" width="300" height="150" style="border:1px solid #1a1e49;"></canvas>
Always use id attribute so that we can access canvas for scripting. You can style canvas as per you requirements with the help of CSS styles.
It is best practice to learn JavaScript before canvas for better understanding.
After creating <canvas> element we must use JavaScript to actually draw the graphics. For this use <script> element inside <head> element.
<script>
var canvas = document.getElementById("exampleCanvas");
var context = canvas.getContext("2d");
context.moveTo(0, 0);
context.lineTo(300, 150);
context.stroke();
</script>
<script>
var canvas = document.getElementById("exampleCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(95, 50, 40, 0, 2 * Math.PI);
context.stroke();
</script>
<script>
var canvas = document.getElementById("exampleCanvas");
var context = canvas.getContext("2d");
context.font = "30px Arial";
context.fillText("Lynxsia IT Solutions", 10, 50);
context.stroke();
</script>
<script>
var canvas = document.getElementById("exampleCanvas");
var context = canvas.getContext("2d");
context.font = "30px Arial";
context.strokeText("Lynxsia IT Solutions", 10, 50);
context.stroke();
</script>
<script>
var canvas = document.getElementById("exampleCanvas");
var context = canvas.getContext("2d");
var grd = context.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "#fc8d2a");
grd.addColorStop(1, "#ff5071");
context.fillStyle = grd;
context.fillRect(10, 10, 150, 80);
context.stroke();
</script>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved