SVG, Canvas, WebGL

SVG

              <svg>
                <rect width="200px" height="100px" fill="blue"
                      stroke="red"/>
                <circle cx="400px" cy="100px" r="100px" fill="green"
                        stroke="orange"/>
              </svg>
          

Benefits

Scaling

Image scaling vs SVG.

Programmatically creating SVG

            <svg id="slide4SVG"></svg>
            <script>
              var ns = "http://www.w3.org/2000/svg";
              var circle = document.createElementNS(ns, "circle");
              circle.setAttribute("fill", "lime");
              circle.setAttribute("r", "25");
              circle.setAttribute("cx", "50%");
              circle.setAttribute("cy", "50%");
              document.getElementById("slide4SVG").appendChild(circle);
            </script>
          

Canvas (Two Dimensional Context)

WebGL

Canvas in a three dimensional context. Can also draw two dimensions very quickly.

Shaders

A shader program consists of one vertex shader and one fragment shader. Shaders can be created programmatically. A webgl context can have many shader programs.

How much work does it take to draw a triangle?

              function createShader (gl, str, type) {
                if (arguments.length !== 3) throw new Error("createShader needs 3 args");
                var shader = gl.createShader(type);
                gl.shaderSource(shader, str);
                gl.compileShader(shader);

                if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                  throw new Error(gl.getShaderInfoLog(shader));
                }
                return shader;
              };

              function createProgram (gl, vstr, fstr) {
                var program = gl.createProgram();
                gl.attachShader(program, createShader(gl, vstr, gl.VERTEX_SHADER));
                gl.attachShader(program, createShader(gl, fstr, gl.FRAGMENT_SHADER));
                gl.linkProgram(program);
                if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                  alert("link error: \n" + JSON.stringify(gl.getProgramInfoLog(program)));
                }
                return program;
              };

              var ctx = document.getElementById("glTriangle").getContext("webgl");
              ctx.bindBuffer(ctx.ARRAY_BUFFER, ctx.createBuffer());
              ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array([
                -0.5, -0.5,
                 0.5, -0.5,
                 0.0,  0.5
              ]), ctx.STATIC_DRAW);
              var program = createProgram(
                ctx,
                "attribute vec2 pos; void main () { gl_Position = vec4(pos, 0, 1); }",
                "precision mediump float; void main () { gl_FragColor = vec4(0.3, 0.8, 0.6, 1); }"
              );
              ctx.useProgram(program);
              var pos = ctx.getAttribLocation(program, "pos");
              ctx.enableVertexAttribArray(pos);
              // 2 points per vertex (x, y)
              // float
              // normalized (false)
              // stride (0)
              // offset (0)
              ctx.vertexAttribPointer(program.vertexPosAttrib, 2, ctx.FLOAT, false, 0, 0);
              // mode, first, count (3 points)
              ctx.drawArrays(ctx.TRIANGLES, 0, 3);
            

WebGL Demos

More WebGL

Raw WebGL