HTML Canvas

HTML Canvas – Draw Graphics with JavaScript

The <canvas> element is an HTML5 feature that allows you to draw graphics using JavaScript. It provides a blank area on which you can draw lines, shapes, images, and more.

Example:

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;">
  Your browser does not support the HTML canvas element.
</canvas>

Try It Now

2. Setting Up the <canvas> Element

To use the <canvas> element, you need two things:

  1. The <canvas> element in your HTML.
  2. JavaScript to access and draw on the canvas.

Basic Setup:

<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
</script>

Try It Now

  • id="myCanvas": Gives the canvas a unique identifier.
  • width and height: Specify the size of the canvas. If not set, the default size is 300×150 pixels.
  • style="border": Adds a border to visually define the canvas area.

3. Drawing Basic Shapes

Once you have the <canvas> element set up, you can start drawing shapes using the canvas context.

a. Drawing a Rectangle

  • fillRect(x, y, width, height): Draws a filled rectangle.
  • strokeRect(x, y, width, height): Draws the outline of a rectangle.

Example:

<script>
  context.fillStyle = "blue";
  context.fillRect(20, 20, 150, 100);  // Draws a blue rectangle
</script>

Try It Now

b. Drawing a Circle

To draw a circle, use the arc() method.

Example:

<script>
  context.beginPath();
  context.arc(100, 75, 50, 0, 2 * Math.PI);  // x, y, radius, start angle, end angle
  context.stroke();  // Draws the circle outline
</script>

Try It Now

c. Drawing Lines

To draw a line, use the moveTo() and lineTo() methods.

Example:

<script>
  context.beginPath();
  context.moveTo(50, 50);  // Starting point
  context.lineTo(200, 50);  // Ending point
  context.stroke();  // Draws the line
</script>

Try It Now

4. Adding Colors and Styles

You can style your drawings using various properties like fillStyle, strokeStyle, and lineWidth.

  • fillStyle: Sets the color or style to fill the shapes.
  • strokeStyle: Sets the color or style for the outlines.
  • lineWidth: Sets the width of the lines.

Example:

<script>
  context.fillStyle = "red";
  context.fillRect(30, 30, 100, 100);

  context.strokeStyle = "green";
  context.lineWidth = 5;
  context.strokeRect(150, 30, 100, 100);
</script>

Try It Now

5. Drawing Text

You can also draw text on the canvas using fillText() and strokeText() methods.

Example:

<script>

  // Set font size and style
  context.font = "30px Arial";

  // Set fill color and draw filled text
  context.fillStyle = "blue";
  context.fillText("Hello, Canvas!", 50, 100); // (text, x, y) Filled text

  // Set stroke color and draw outlined text
  context.strokeStyle = "red";
  context.lineWidth = 2;
  context.strokeText("Hello Canvas!", 50, 150); // (text, x, y) Outlined text

</script>

Try It Now

6. Working with Images

To draw images on the canvas, use the drawImage() method.

Example:

<script>
  
    // Get the canvas element
    var canvas = document.getElementById("myCanvas");

    // Get the 2D drawing context
    var context = canvas.getContext("2d");

    // Create an image object
    var img = new Image();

    // Set the source of the image
    img.src = "images.jpg"; // image URL

    // Draw the image on the canvas after it loads
    img.onload = function () {
      context.drawImage(img, 50, 50, 150, 150); // (image, x, y, width, height)
    };

</script>

Try It Now

7. Adding Interactivity

You can add interactivity to the canvas by handling user events like clicks or mouse movements.

Example:

<script>
  canvas.addEventListener('click', function(event) {
    var x = event.clientX - canvas.offsetLeft;
    var y = event.clientY - canvas.offsetTop;
    context.fillStyle = "purple";
    context.fillRect(x, y, 10, 10);  // Draw a small rectangle where the user clicked
  });
</script>

Try It Now

8. Animating on the Canvas

You can create animations by continuously updating the canvas and redrawing the shapes.

Example:

<script>
  var x = 0;
  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);  // Clear the canvas
    context.fillRect(x, 50, 50, 50);  // Draw a moving rectangle
    x += 2;  // Move the rectangle
    if (x < canvas.width) {
      requestAnimationFrame(draw);  // Continue the animation
    }
  }
  draw();
</script>

Try It Now

9. Best Practices

  • Use requestAnimationFrame for Animations: This method ensures smooth animations by syncing with the display refresh rate.
  • Clear the Canvas: Always clear the canvas before redrawing to avoid overlapping graphics.
  • Optimize for Performance: Keep canvas operations minimal in each frame for better performance in animations.

Conclusion

The HTML <canvas> element provides a flexible and powerful way to create graphics and animations on the web. With a combination of basic shapes, colors, images, and interactivity, you can create engaging visual content. Whether you are developing simple visualizations or complex games, mastering the <canvas> element is a valuable skill in web development.