JavaScript JS Tutorial JS Objects JS Functions JS Classes JS Async JS HTML DOM JS Browser BOM JS Web APIs JS AJAX JS JSON JS vs jQuery JS Graphics



JS Canvas

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.

Brief Explanation of JS Canvas

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 rectangle
  • strokeRect(x, y, width, height) - draws a rectangle with an outline
  • clearRect(x, y, width, height) - clears a rectangular area
  • beginPath() - starts a new path
  • moveTo(x, y) - moves the pen to a new location
  • lineTo(x, y) - draws a line to a new location
  • stroke() - draws the outline of the path
  • fill() - fills the path with the current fill style
  • arc(x, y, radius, startAngle, endAngle, anticlockwise) - draws an arc
  • drawImage(image, x, y, width, height) - draws an image
  • fillText(text, x, y) - draws text

JS 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 color
  • strokeStyle - sets the stroke color
  • lineWidth - sets the width of the stroke
  • font - sets the font for text
  • textAlign - sets the horizontal alignment for text
  • textBaseline - sets the vertical alignment for text

Code Examples

Here are some examples of JS Canvas code:

Example 1: Drawing a Rectangle

<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.

Example 2: Drawing a Line

<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.

Example 3: Drawing an Image

<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".

Conclusion

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.

References

Activity