The HTML5 canvas element is used JavaScript for dynamic, scriptable rendering of 2D shapes and bitmap images to draw graphics on a web page.
A canvas is a rectangular area, and you control every pixel of it.
The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.
It has no drawing abilities of its own. All drawing must be done inside a JavaScript.
<canvas id="myCanvas" width="200" height="100"></canvas>
Syntax:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="maroon";
ctx.fillRect(0,0,100,50);
</script>
Example:1
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="maroon";
ctx.fillRect(0,0,100,50);
</script>
</body>
</html>
Result:
Note:
- JavaScript uses the id to find the canvas element:
2. create a context object:
var ctx=c.getContext("2d");
3. The fillStyle method makes it maroon, and the fillRect
method specifies the shape, position, and size.
The canvas' X and Y coordinates are used to position drawings on the canvas.
Example 2: Draw a line by specifying from where it will start, and it will stop.
The canvas' X and Y coordinates are used to position drawings on the canvas.
ctx.fillStyle="maroon";
ctx.fillRect(0,0,150,75);
ctx.fillRect(0,0,150,75);
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas-range" width="200" height="200" style="border:1px solid red;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas-range");
var ctx=c.getContext("2d");
ctx.moveTo(20,20);
ctx.lineTo(100,75);
ctx.lineTo(20,75);
ctx.stroke();
</script>
</body>
</html>
<html>
<body>
<canvas id="myCanvas-range" width="200" height="200" style="border:1px solid red;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas-range");
var ctx=c.getContext("2d");
ctx.moveTo(20,20);
ctx.lineTo(100,75);
ctx.lineTo(20,75);
ctx.stroke();
</script>
</body>
</html>
Result:
Example 3: Draw a circle by specifying the size, color, and position.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:2px solid green;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="maroon";
ctx.beginPath();
ctx.arc(70,50,50,50,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:2px solid green;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="maroon";
ctx.beginPath();
ctx.arc(70,50,50,50,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
Result:
Example 4: Draw a gradient background with the colors specify.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:2px solid blue;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"red");
grd.addColorStop(1,"green");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:2px solid blue;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"red");
grd.addColorStop(1,"green");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Result:
No comments:
Post a Comment