HTML is one of the languages I am using on my degree, today I started experimenting with the canvas method and inline SVG images.
The HTML 5 Canvas
What is the Canvas method in HTML 5? Canvas is a feature that is new to HTML 5 which allows web pages to become more dynamic. Before HTML 5, web developers had to use Adobe Flash to generate dynamic graphics, embedded games, embedded animations and interactive videos and audio. With Adobe phasing out Flash and with Flash not being compatible on all mobile devices (I’m looking at the Apple users, specifically!), HTML 5’s Canvas method sounds appealing! It scales well across mobile devices and does not require Flash Player or any kind of third party plugins to run, extending its compatibility across many devices for the world we live in today. All it really requires is an up-to-date web browser.
To get the best out of Canvas, you should also use other languages such as CSS and JavaScript, however today I have just been experimenting with some very basic Canvas examples in HTML only. The example below will generate a basic dotted box on the page.
In order to actually use Canvas, you need to create a Canvas in HTML 5 and then use scripts to draw the shapes, as shown in my coded examples later.
<canvas id="myCanvas" width="600" height="600" style="border:5px dotted #fa1717;"> //Create a div called 'myCanvas', set size to 600x600px, define a dotted border 5px in width and use #fa1717 as the colour (a shade of red) Your browser does not support elements of this website. //Message that displays if your browser is not compatible with HTML 5 </canvas>
The output of this code is shown below.
Although this is not a screenshot, if you right click on the box above you can save this as an image. The images that you can generate in code using Canvas you can save as JPG or PNG images because Canvas basically generates a bitmap image.
Here’s another example – creating a circle. Look at the code below.
//Circle example
var c = document.getElementById("myCanvas"); //Place in the div created earlier called 'myCanvas'
var ctx = c.getContext("2d"); //Create a 2D shape and assign this 2D shape to the variable 'ctx'
ctx.beginPath(); //Start the path for drawing
ctx.arc(400, 100, 40, 0, 2 * Math.PI); //Plot the padding of the arc of the circle, e.g. start 400px from the left of the canvas defined in the 'myCanvas' div
The output of this code is shown below, you can see that the circle is positioned inside the canvas, which is marked by the dotted red boundary.
View it in your browser here.
You can see that the Canvas method generally works by drawing shapes using pixels on the page as coordinates to work from.
You can also generate text effects using Canvas, the code below will generate shadowed text that displays ‘Canvas’.
//Stroke text example
var c = document.getElementById("myCanvas"); //Take properties from the 'myCanvas' div created earlier
var ctx = c.getContext("2d"); //Create a 2D shape and assign this 2D shape to the variable 'ctx'
ctx.font = "50px Consolas"; //Set the text size to 50px and the font to Consolas
ctx.strokeText("Canvas", 30, 400); //Can also use 'fillText' if stroke is not required
You can see the output of this code below. Note how the text ‘Canvas’ is inside the frame just like the circle was.
View it in your browser here.
Gradients can also be generated using Canvas. The code below creates a blue to white gradient and displays it as a block.
//Linear gradient example
var c = document.getElementById("myCanvas"); //Place in the 'myCanvas' div created earlier
var ctx = c.getContext("2d"); //Create a 2D shape and assign this 2D shape to the variable 'ctx'
// Create gradient
var grd = ctx.createLinearGradient(00, 00, 200, 0); //Plot the coordinates for the gradient line
grd.addColorStop(0, "blue"); //Define the start colour (left-most colour)
grd.addColorStop(1, "white"); //Define the finishing colour (right-most colour)
// Fill with gradient
ctx.fillStyle = grd; //Set the fill style to a gradient fill ('grd')
ctx.fillRect(10, 10, 150, 80); //Sets the opacity of the fill
You can see the output of this code below. Again, the gradient block appears inside of the canvas.
View it in your browser here.
Inline SVG images
The other thing I have been looking at today are SVG images. SVG images are vector-based images defined using XML, so these are perfect for creating vector graphics on the web that scale well since a vector graphic can be any size you specify as it’s made up of a series of lines.
Code for creating SVG graphics is relatively straightforward and can be done completely in HTML with very little CSS or JavaScript unless you plan to animate your SVGs. The code below will create an SVG circle. Note, SVG images do not need to be placed within a Canvas.
You can see the outcome of this code below.
Sorry, your browser does not support inline SVG.
You can also create more complex shapes using polygons, such as stars, see the example code and output below.
Sorry, your browser does not support inline SVG.
What’s better? Canvas or SVG?
Unsurprisingly, the answer is: ‘it depends’. On one hand, Canvas is interactive and can even respond to user interactions by listening out for touch events. As mentioned earlier, you can also save the images you create using Canvas as a PNG or JPG image, whereas with SVG you are stuck with the SVG format if you attempt to save an SVG image. This format cannot be read by many applications. Objects that are drawn onto the canvas can be easily animated using CSS or JavaScript code, allowing for more interactive and visually-appealing websites and assets and Canvas works well with dealing with multiple elements. Unfortunately, Canvas renders text poorly, it’s dependent on resolution, uses complex visualisations and it can be slow when drawing to large areas.
SVG on the other hand is resolution independent, so it scales well to a variety of devices and because SVG images are vectors, they are generated using mathematical formulas which require less data to be stored in the source file because data doesn’t have to be stored for each individual pixel. Canvas images are bitmaps and made up of pixels, thus data for each pixel needs to be stored. Smaller source files for SVG files because of this are smaller and so they load faster and utilise less than bandwidth than Canvas source files. This also makes it ideal for use with apps that need large rendering areas, like Google Maps. However, SVG is not as suited for gaming as Canvas images are and when the document complexity increases, the rendering of SVG images can become slower too.
As a web developer you have to look at the pros and cons of both and decide which is best for your application. Are you creating apps that need large rendering areas like interactive maps? Do you need perfect scaling and mobile compatibility? Are you concerned about bandwidth and speed? If the answer is ‘yes’ to any of those questions, then SVG is likely the better format for you. If you’re interested in making games, using touch controls and putting animation onto your website, then Canvas is likely for you.
1 Comment on “Canvases and SVGs in HTML 5”