HTML5 Canvas

-

HTML5 Canvas

The HTML <canvas> element is used to draw graphics on a web page.

Canvas :- It is a rectangular area on an HTML page. 
Example, 
<canvas id = 'canvas1' width = '200px' height = '200px' style = 'border : 2px solid black;'></canvas>



Draw a rectangle

<html>
<head>
<title>HTML5 Canvas</title>
<head>
<body>
<canvas id = 'canvas1' width = '200px' height = '200px' style = 'border : 2px solid black;'></canvas>
<script>
c1 = document.getElementById('canvas1');
c1_x = c1.getContext('2d');
c1_x.fillStyle = 'orange';
c1_x.fillRect(50,100,200,100);
</script>
</body>
</html>

 

 Draw a line

<html>
<head>
<title>HTML5 Canvas</title>
<head>
<body>
<canvas id = 'canvas2' width = '200px' height = '200px' style = 'border : 2px solid black;' ></canvas>
<script>
c2 = document.getElementById('canvas2');
c2_x = c2_x.getContext('2d');
c2_x.beginPath();
c2_x.moveTo(50,50);
c2_x.lineTo(150,100);
c2_x.lineWidth = 5;
c2_x.strokeStyle = 'blue';
c2_x.stroke();
</script>
</body>
</html>

 


Draw a Circle

<html>
<head>
<title>HTML5 Canvas</title>
<head>
<body>
<canvas id = 'canvas3' width = '200px' height = '200px' style = 'border : 2px solid black;' ></canvas>
<script>
c3 = document.getElementById('canvas3');
c3_x = c3.getContext('2d');
c3_x.beginPath();
c3_x.arc(100,100,50,0,2*Math.PI);
c3_x.stroke();
</script>
</body>
</html>

 

Draw a Quadratic Curve

<html>
<head>
<title>HTML5 Canvas</title>
<head>
<body>
<canvas id = 'canvas4' width = '200px' height = '200px' style = 'border : 2px solid black;' ></canvas>
<script>
c4 = document.getElementById('canvas4');
c4_x = c4.getContext('2d');
c4_x.beginPath();
c4_x.moveTo(50,100);
c4_x.quadraticCurveTo(150,100,120,200);
c4_x.stroke();
</script>
</body>
</html>

 

Draw a Bezier Curve

<html> 
<head>
<title>HTML5 Canvas</title>
<head>
<body>
<canvas id = 'canvas5' width = '200px' height = '200px' style = 'border : 2px solid black;' ></canvas>
<script>
c5 = document.getElementById('canvas5');
c5_x = c5.getContext('2d');
c5_x.beginPath();
c5_x.moveTo(50,150);
c5_x.bezierCurveTo(50,150,100,180,150,100);
c5_x.stroke();
</script>
</body>
</html>


Example

<html>
<head>
<title>HTML5 Canvas</title>
<head>
<body>
<canvas id = 'canvas6' width = '400px' height = '400px' style = 'border : 2px solid black;' ></canvas>
<script>
c6 = document.getElementById('canvas6');
c6_x = c6.getContext('2d');
c6_x.beginPath();
c6_x.moveTo(30,300);
c6_x.lineTo(50,100);
c6_x.bezierCurveTo(150,50,200,100,150,180);
c6_x.bezierCurveTo(250,150,300,200,250,280);
c6_x.lineTo(30,300);
c6_x.stroke();
</script>
</body>
</html>

 

Comments

Post a Comment

Popular posts from this blog

Some tips about the right way to charge your phone

-
Some tips about the right way to charge your phone 1. Letting your phone go to 0% charge and then recharging it to 100%. It is definitely not a good option. If you do so you can damage the inside materials of the battery and can cause battery corrosion. 2. A fast charge can reduce your battery life.  It generates more heat than the normal charge which is bad for the battery.  It consumes more battery than it gives to your phone. 3. Using Random chargers -   It's not true that all the charges are the same. The best thing you could do to your phone is to provide it with the original charger. Other chargers may have different potentials that can damage your phone and also they don't include any protection from power surges. 4. Charging your phone in cafes or other public places. You never know whether the plug is faulted or even the voltage is right. Also if you are using USB someone may steal your data. 5.  Power banks are much safer than any public place. Just ma...
Read more

Software Basics

-
Image
Software Basics A computer consists of hardware and software for its proper functioning. Hardware represents the physical and tangible components of the computer i.e. the components that can be seen and touched. Example, input and output devices, CPU, hard disk, etc. Software represents the set of programs that govern the operation of a computer system and make the hardware run.  There are two categories of software : System Software Application Software  System software The software that controls internal computer operations ( i.e. reading data from input devices, transmitting processed information to the output devices, checking system components, converting data to computer understandable form etc.) is called system software. It controls the hardware and helps application software run properly. System Software includes following types of software : Operating System Language Processor Utility Software Device Drivers Operating System An operating system is a program which a...
Read more