drawing-img

From Static to Dynamic: Exploring Canvas and SVG in HTML

HTML & CSS, JavaScript

Published: 12.12.2023

In the world of web development, adding graphical elements to HTML pages has evolved from static images. Two prominent techniques for creating dynamic graphics are Canvas and SVG (Scalable Vector Graphics). In this article, we delve into the capabilities of both methods and explore how they can be used to enhance the interactivity and visual appeal of web content.

Canvas:

The HTML canvas element serves as a dynamic drawing board that allows developers to dynamically create graphical elements using JavaScript. Below are examples illustrating the creation of simple graphics with Canvas:

Example 1: Drawing a Line

   var c = document.getElementById("canvasSquare");
var ctx = c.getContext("2d");

ctx.moveTo(125, 0);

ctx.lineTo(150, 50);
ctx.lineTo(250, 60);
ctx.lineTo(175, 100);
ctx.lineTo(200, 150);
ctx.lineTo(125, 120);
ctx.lineTo(50, 150);
ctx.lineTo(75, 100);
ctx.lineTo(0, 60);
ctx.lineTo(100, 50);
ctx.lineTo(125, 0);

ctx.closePath();
ctx.stroke();
    

Example 2: Interactive Drawing

let el = document.getElementById('drawingCanvas');
  var ctx = el.getContext('2d');
  let isDrawing;
  let inputEl = document.getElementById('canvasData');

  el.onpointerdown = function (e) {
    isDrawing = true;
    ctx.moveTo(e.offsetX, e.offsetY);
  };

  el.onpointermove = function (e) {
    if (isDrawing) {
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
    }
  };

  el.onpointerout = el.onpointerup = function () {
    if (isDrawing) {
      isDrawing = false;
      let data = el.toDataURL();
      inputEl.value = data;
    }
  };

  let reset = document.getElementById('drawingCanvasReset');
  reset.onclick = () => {
    ctx.beginPath();
    ctx.clearRect(0, 0, el.width, el.height);
    inputEl.value = null;
  };


SVG:

Scalable Vector Graphics (SVG) is an XML-based markup language for displaying two-dimensional graphical elements. SVG seamlessly integrates with other W3C standards, and the elements can be easily animated. Below is an example of creating a simple SVG circle:

Comparison:

Let's compare Canvas and SVG based on key features:

Canvas:
  • Resolution-dependent
  • No support for event handlers
  • Limited capabilities for rendering text
  • Suitable for graphics-intensive games
  • Resulting images can be saved as .png or .jpg
SVG:
  • Resolution-independent
  • Support for event handlers
  • Ideal for applications with large display areas (e.g., Google Maps)
  • Slower rendering for complex graphics (DOM-intensive)
  • Not suitable for game applications

Conclusion:

Both Canvas and SVG offer powerful front-end techniques suitable for various applications. Canvas excels in dynamic, resolution-dependent graphics, making it an excellent choice for games. On the other hand, the scalability and event support of SVG make it ideal for applications with large display areas. Whether you're creating interactive maps or immersive online games, understanding the strengths of Canvas and SVG enables you to choose the right tool for your web development needs. Stay tuned for more articles exploring advanced techniques and practical examples with Canvas and SVG!

Read some of our blogs down here!

Expand your knowledge with the 4BIS Blog...

WordPress and Plugins – A world that opens up for you!

WordPress, Web development, Ecommerce / Webshop, Knowledge Base, WooCommerce

With plugins you can expand the functionality of WordPress or add completely new functions to WordPress. You can make plugins yourself, provided you know PHP, or you can download them.

Read more

Unveiling Tech-Nieuws.nl: Where Innovation Meets Ingenuity

SEO / SEA, Software Modernisation, Web development, PHP, Symfony, Digital Marketing

In the bustling realm of technology, staying updated is not just a necessity but a lifestyle. With an overflow of information bombarding us daily, having a reliable source to curate and present the latest tech news becomes invaluable. Enter Tech-Nieuws.nl,...

Read more

HR software: This is how you automate Human Resource Management

Business software, Software Modernisation, Web development, Automate

HRM, also known as Human Resource Management, is an important part for every company. Especially if you have many employees, an HR department is indispensable. However, it is not necessary to have a huge HR department. Much can be automated using HR...

Read more

And what can we do for you?_

Do you want to know more or are you interested? Please feel free to contact us directly, by phone or via mail.
Or use one of our contact forms so that we can answer you as quickly and appropriately as possible can give. We would love to hear from you!

back to top