HTML5 element <canvas> tag gives you a powerful way to draw graphics using JavaScript.
canvas is a part of the HTML5 specification for next-generation web technologies.
The HTML 5 <canvas> tag is used to draw graphics using a scripting language like JavaScript.
There are some methods in canvas to draw paths, boxes, circles, text and add images.
Create HTML Canvas:
Example:
<canvas id = "mycanvas" width ="250" height ="150"></canvas>
Understanding Canvas Coordinates:
The term canvas is a two-dimensional rectangular area. The coordinates of the top-left corner of the canvas are (0, 0) which is known as origin, and the coordinates of the bottom-right corner are (canvas width, canvas height).
If you want to draw a circle on the canvas, you can use the arc() method:
Applying Styles and Colors on Stroke
The default color is black and its thickness is one pixel. But, you can set the color and width of the stroke using the stroke Style and lineWidth property respectively.
The example will draw an orange color line having 5 pixels width.
Example:
<script>
window.onload = function() {
var canvas = document.getElementById("ourCanvas");
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok