10 Jul HTML5 Canvas
If you want to draw graphics on a web page, use the HTML5 canvas element. The canvas element is a new element added in HTML 5.
Apple introduced canvas in 2004, initially for using it inside their Mac OS X WebKit component.
With canvas, you can draw awesome graphics, decorative images, games, etc.
Here, we will see an example to draw a line, text, etc.
Example
<canvas id="newCanvas" width="300" height="200" style="border:3px solid #FF4500;"> </canvas>
Here’s the output,
Above, you can see a canvas with id, height and width. These attributes are essential to add. We also added style, with border and border color.
Now, we will see how to create a circle with canvas. Here, we’re using arc() function to create a circle.
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="230" height="130" style="border:3px solid #FF4500;">
HTML5 canvas isn't supported by your browser.</canvas>
<script>
var v = document.getElementById("newCanvas");
var c = v.getContext("2d");
c.beginPath();
c.arc(120,65,55,0,2*Math.PI);
c.stroke();
</script>
</body>
</html>
Here’s the output,
Now, we will see how to create a line. Here, we’re using lineTo() function to create a line,
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="180" height="130" style="border:3px solid #FF4500;">
HTML5 canvas isn't supported by your browser.</canvas>
<script>
var v = document.getElementById("newCanvas");
var c = v.getContext("2d");
c.moveTo(0,0);
c.lineTo(180,130);
c.stroke();
</script>
</body>
</html>
Here’s the output, showing line drawn with canvas,
Another example demonstrates how to create a straight line with HTML5 canvas easily. We’re using the same method used above, but we edited the values to form it in the form of a line.
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="180" height="130" style="border:3px solid #FF4500;">
HTML5 canvas isn't supported by your browser.</canvas>
<script>
var v = document.getElementById("newCanvas");
var c = v.getContext("2d");
c.moveTo(20,0);
c.lineTo(20,130);
c.stroke();
</script>
</body>
</html>
Here’s the output, showing straight line drawn with canvas,
No Comments