“This is the first day of my participation in the August More Text Challenge.

Title of this article: Canvas Vs SVG differences | More challenges in August

Both allow graphics to be created in the browser, but they are fundamentally different

canvas

  • Use Javascript to draw 2D graphics
  • It’s rendered pixel by pixel.
  • Once the graph is drawn, it is ignored by the browser and redrawn if its position changes.

Steps to use Canvas:

  1. Gets the DOM object corresponding to the element, which is a Canvas object;
  2. Call the Canvas getContext() method to get a CanvasRenderingContext2D object;
  3. Call the CanvasRenderingContext2D object to draw.

Features:

  • Resolution dependent
  • Event handlers are not supported
  • Weak text rendering capability
  • Ability to save the resulting image in.png or.jpg format
  • Best suited for graphics-intensive games, where many objects are frequently redrawn

WebGl

  • WebGL is the version of OpenGL, which is the 3D engine. WebGL helps users perform 3D operations in a Web browser.

  • The Canvas API is easier to learn and understand if the user wants to understand and write code at the initial level (or start). It can be said that the understanding of Canvas cloth requires the least mathematical understanding, while WebGL requires people with certain mathematical knowledge.

  • The native 3D API for WebGL is faster and has more features such as rendering pipelines, code accessibility, and faster execution.

SVG

SVG stands for Scalable Vector Graphics, a Graphics format based on extensible Markup Language (XML) for describing two-dimensional Vector Graphics. SVG is a new 2d vector graphics format developed by W3C, and is also the web vector graphics standard in the specification. SVG strictly follows XML syntax and uses descriptive language of text format to describe image content, so it is a vector graphics format independent of image resolution. Not suitable for game applications.

 <svg width="100%" height="100%"  >
        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
    </svg>
Copy the code

The difference between

Canvas drawing is based on pixels and is a bitmap. If you zoom in or zoom out, it will be distorted. SVG is based on graphics

Canvas needs to draw SVG in JS and draw in HTML

Canvas cannot modify the already drawn image, and SVG can obtain the label for operation

Canvas is suitable for scenes with bitmaps, high data volume and high drawing frequency (frame rate), such as animations and games. SVG is suitable for vector graphs and scenes with low data volume and low drawing frequency, such as graphs and charts.