JavaScript (JS) is a popular programming language used for creating interactive web applications. One of the most powerful features of JS is its ability to manipulate the Document Object Model (DOM) of a web page. This allows developers to create dynamic and interactive web pages that respond to user input.
JS Canvas is a powerful tool that allows developers to create graphics and animations directly on a web page. It is a part of the HTML5 specification and is supported by all modern web browsers. With JS Canvas, developers can create complex graphics and animations that are responsive and interactive.
JS Canvas is a 2D drawing API that allows developers to create graphics and animations directly on a web page. It provides a set of methods and properties that can be used to draw shapes, lines, text, and images. The canvas element is added to a web page using HTML and can be styled using CSS.
The canvas element is created using the following HTML code:
<canvas id="myCanvas"></canvas>
The canvas element has a width and height attribute that can be used to set the size of the canvas. The default size of the canvas is 300 pixels wide and 150 pixels high. The canvas element can be styled using CSS to change its appearance.
JS Canvas provides a set of methods and properties that can be used to draw on the canvas. The most commonly used methods are:
fillRect(x, y, width, height)
- draws a filled rectanglestrokeRect(x, y, width, height)
- draws a rectangle with an outlineclearRect(x, y, width, height)
- clears a rectangular areabeginPath()
- starts a new pathmoveTo(x, y)
- moves the pen to a new locationlineTo(x, y)
- draws a line to a new locationstroke()
- draws the outline of the pathfill()
- fills the path with the current fill stylearc(x, y, radius, startAngle, endAngle, anticlockwise)
- draws an arcdrawImage(image, x, y, width, height)
- draws an imagefillText(text, x, y)
- draws textJS Canvas also provides a set of properties that can be used to set the current drawing style. The most commonly used properties are:
fillStyle
- sets the fill colorstrokeStyle
- sets the stroke colorlineWidth
- sets the width of the strokefont
- sets the font for texttextAlign
- sets the horizontal alignment for texttextBaseline
- sets the vertical alignment for textHere are some examples of JS Canvas code:
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
</script>
This code creates a canvas element with a width and height of 200 pixels. It then gets the canvas context and sets the fill style to red. Finally, it draws a filled rectangle at position (10, 10) with a width and height of 50 pixels.
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.stroke();
</script>
This code creates a canvas element with a width and height of 200 pixels. It then gets the canvas context and sets the stroke style to blue and the line width to 5 pixels. It then starts a new path, moves the pen to position (10, 10), draws a line to position (100, 100), and finally strokes the path.
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, 200, 200);
};
img.src = "image.jpg";
</script>
This code creates a canvas element with a width and height of 200 pixels. It then gets the canvas context and creates a new image object. It sets the onload event handler for the image object to draw the image on the canvas when it is loaded. Finally, it sets the source of the image object to "image.jpg".
JS Canvas is a powerful tool for creating graphics and animations directly on a web page. It provides a set of methods and properties that can be used to draw shapes, lines, text, and images. With JS Canvas, developers can create complex graphics and animations that are responsive and interactive.