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>
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai
ReplyDeleteThis 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
ReplyDelete