Skip to content

Latest commit

 

History

History
72 lines (52 loc) · 1.88 KB

24.svgs-canvas-webgl.md

File metadata and controls

72 lines (52 loc) · 1.88 KB

25 SVG's, Canvas and WebGL

SVG's

  • SVG stands for Scalable Vector Graphics.
  • SVG is vector based graphics in XML format.
  • SVG are scalable, zoomable and can be printed at high resolutions as well.
  • SVG doesn't lose quality when we zoom in/out.
  • Each SVG element and attribute can be animated.

Example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>

More on SVG's

Canvas

  • Canvas is an HTML element.
  • Canvas is used to draw 2D & 3D graphics via javascript.
  • All most all the browser supports canvas.
  • Canvas results can be saved as PNG or JPG format.
  • Canvas is mostly suited for high graphic games.

Example:

<canvas id="myCanvas" width="200" height="200"></canvas>

Below is the javascript to draw a line in canvas.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

More on Canvas Element.

WebGL

  • WebGL stands for Web Graphics Library.
  • WebGL is based on the OpenGL ES.
  • WebGL is javascript API for rendering 2D & 3D graphics in Canvas.
  • WebGL is supported in all latest browsers.

Example:

<canvas id="myCanvas" width="400" height="400"></canvas>

WebGL javascript API used in above Canvas.

var canvas = document.getElementById("myCanvas");
var webGL = canvas.getContext("webgl");

if (!webGL) {
  alert("WebGL is not supported"); 
  return;
}

More on WebGL API.