One of the goals of HTML5 is to make the web completely independent of plugins such as Silverlight, Flash or java applets. To handle this HTML5 introduced the canvas API to create own graphics in our websites with help of JavaScript. It creates a drawing surface a blank area with in the browser that area is marked of in XY coordinates. In this tutorial i want to explain how to create different shapes using canvas element easily with examples. Lets Start with rectangles
The rectangles are fully supported by the canvas tag and it has three set of properties like stroke, fill, clear. In this sample ex i have created canvas it has blue outline and filled with green background color and inside the canvas i just drawn the sample shape rectangle and filled with light green. Please look the example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Tutorial</title>
<style>
body {
font-family: arial, verdana;
font-size: 12px;
}
canvas {
border: 2px solid darkblue;
background-color: lightgreen;
}
</style>
</head>
<body>
<H1>Basic Example</H1>
<canvas id="myCanvas">
Sorry, your browser doesn't support canvas.
</canvas>
<script>
// Get the canvas element and its drawing context.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// Draw a simple filled rectangle.
var edge = 20;
context.fillStyle = "rgba(0, 0, 255, 0.25)";
//Another way to define fill style
//context.fillStyle = "grey";
context.fillRect(20, 20, 260, 110);
</script>
</body>
</html>
This blog through it words has given a key to proficiency.
ReplyDeletewww.canvasprints.com
Generally, you will frequently have the option to sell your canvas print with no exorbitant edge at an equivalent cost as outlined paper print. An exhibition wrapping on your canvas print fundamentally implies that the picture on the canvas folds right over the casing, making even the sides part of the craft of the picture. Lumosity
ReplyDeleteThat is great that you are providing valuable insights into HTML5's goal of eliminating the need for plugins like Silverlight, Flash, or Java applets by introducing the canvas API. The focus on rectangles showcases the canvas tag's capabilities, with stroke, fill, and clear properties, demonstrated in the sample example with a blue outline, green background, and a light green-filled rectangle. It's evident that mastering canvas element usage can enhance web development skills, just like how professional LinkedIn profile building services can boost one's chances in the job market by presenting a polished and impactful online presence.
ReplyDelete