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>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>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>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>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);
}
Click on the "Try Now" button to see how it works.