View video tutorial

HTML Graphics

HTML

Graphic contents can be added to html page using <svg> or <canvas>.

Graphic contents in HTML page.


Without multimedia, images, graphics a web page has just text contents, these are not much attractive to users.

.png,.jpeg,.gif etc are raster or pixel based image, they loose the image quality when scaled up. <img> can be used to display images.

<svg> image is a vector image and can be scaled up or down without loosing the image quality. <img> or <svg> element is used to display vector image.

<canvas> is a HTML element and container to draw graphics on HTML page using JavaScript. It draws pixel based graphics on canvas context area. <canvas> element is used to display image using JavaScript.

Some example of Graphics <svg> and <canvas> in HTML

You don't need to worry about how the examples are working.

Example: <svg> Basic shapes

<svg width="600" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />

    <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5" />
    <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5" />

    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5" />
    <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange"
        fill="transparent" stroke-width="5" />

    <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green"
        fill="transparent" stroke-width="5" />

    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5" />
</svg>

Example: <svg> rotation

<svg width="600" height="150">
    <title>SVG Animate with transform</title>
    <rect x="0" y="0" width="600" height="150" stroke="black" stroke-width="1" />
    <circle cx="10" cy="40" r="15" fill="red" stroke="black" stroke-width="1">
        <animateTransform attributeName="transform" begin="0s" dur="6s" type="rotate" from="0 60 60" to="360 100 60"
            repeatCount="indefinite" />
    </circle>
</svg>
SVG Animate with transform

Example: <svg> Linear motion

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100">
    <title>SVG Animate with Path</title>
    <rect x="0" y="0" width="600" height="100" stroke="black" stroke-width="1" />
    <circle cx="0" cy="50" r="15" fill="red" stroke="black" stroke-width="1">
        <animateMotion path="M 0 0 H 600 Z" dur="3s" repeatCount="indefinite" />
    </circle>
</svg>
SVG Animate with Path

Example: <svg> graphic motion according to a path

<svg width="600" height="100">
    <title>SVG Animate with Path</title>
    <rect x="0" y="0" width="600" height="100" stroke="black" stroke-width="1" />
    <rect x="0" y="0" width="20" height="20" fill="red" stroke="black" stroke-width="1">
        <animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" dur="5s"
            repeatCount="indefinite" rotate="auto" />
    </rect>
</svg>
SVG Animate with Path

Example: <canvas> Graphic motion

<canvas class="myCanvas">
    <p>Canvas not supported by your browser.</p>
</canvas>
<script>
    const canvas = document.querySelector('.myCanvas');
    const width = canvas.width = 600;
    const height = canvas.height = 200;
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.fillRect(0, 0, width, height);

    ctx.translate(width / 2, height / 2);

    const image = new Image();

    image.src = 'walking.png';
    image.onload = draw;

    let sprite = 0;
    let posX = 0;

    function draw() {
        ctx.fillRect(-(width / 2), -(height / 2), width, height);
        ctx.drawImage(image, (sprite * 102), 0, 102, 148, 0 + posX, -74, 102, 148);

        if (posX % 13 === 0) {
            if (sprite === 5) {
                sprite = 0;
            } else {
                sprite++;
            }
        }

        if (posX > width / 2) {
            let newStartPos = -((width / 2) + 102);
            posX = Math.ceil(newStartPos);
            console.log(posX);
        } else {
            posX += 2;
        }

        window.requestAnimationFrame(draw);
    }
    ;
</script>

Canvas not supported by your browser.


Example: <canvas> Graphic Animation

                            const scene = new THREE.Scene();

                            const camera = new THREE.PerspectiveCamera(75, 600/400, 0.1, 1000);
                            camera.position.z = 5;

                            const renderer = new THREE.WebGLRenderer();
                            renderer.setSize(600, 400);
                            document.body.appendChild(renderer.domElement);

                            let cube;

                            const loader = new THREE.TextureLoader();

                            loader.load('box.png', texture => {
                                texture.wrapS = THREE.RepeatWrapping;
                                texture.wrapT = THREE.RepeatWrapping;
                                texture.repeat.set(2, 2);

                                const geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);
                                const material = new THREE.MeshLambertMaterial({map: texture});
                                cube = new THREE.Mesh(geometry, material);
                                scene.add(cube);

                                draw();
                            });

                            const light = new THREE.AmbientLight('rgb(255,255,255)'); // soft white light
                            scene.add(light);

                            const spotLight = new THREE.SpotLight('rgb(255,255,255)');
                            spotLight.position.set(100, 1000, 1000);
                            spotLight.castShadow = true;
                            scene.add(spotLight);

                            function draw() {
                                cube.rotation.x += 0.01;
                                cube.rotation.y += 0.01;
                                renderer.render(scene, camera);

                                requestAnimationFrame(draw);
                            }
Try Now »

Click on the "Try Now" button to see how it works.