Canvas vs SVG
RSSchool-2019-Q1
Task: Presentation
Created by Krystsina Gerko
Common features
- are used to create and develop images and shapes
- W3 recommendation
- HTML elements
SVG vs Canvas
| Canvas | SVG | |
|---|---|---|
| Image Format | Bitmap | Vector |
| Quality by resizing | Low | High |
Canvas vs SVG
| Canvas | SVG | |
|---|---|---|
| Image Format | Bitmap | Vector |
| Quality by resizing | Low | High |
| Knowledge | HTML & JS | HTML & XML |
How to begin with canvas
HTML
<canvas id="canvas" width="500" height="300"></canvas>
JavaScript
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
Rectangles
ctx.fillRect(x, y, width, height);
ctx.fillStyle = "#f92672";
ctx.fillRect(100, 50, 100, 100);
ctx.rect(100, 50, 100, 100);
ctx.stroke();
Lines
ctx.moveTo(60, 60); // start
ctx.lineTo(200, 100); // end
ctx.stroke();
Circles
ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2 * Math.PI);
// x, y, radius, startAngle, endAngle
ctx.stroke();
Cool example # 1
Cool example # 2
How to begin with SVG
Rectangles
Lines
More possibilities of SVG
Canvas vs SVG
| Canvas | SVG | |
|---|---|---|
| Knowledge | HTML & JS | HTML & XML |
| Can be modified through | script | script & CSS |
| Interaction | No support for event handlers | Support for event handlers |
Canvas vs SVG
| Canvas | SVG | |
|---|---|---|
| Size of file | don't increase too much | increase too much |
| Usage | Difficult pictures, game applications; not recommended for large screens | Icons, logos, static pictures, animation; recommended for large screens |
Sources
Google is our best friend :)