Canvas
The HTML canvas element can be used to draw graphical elements on the fly with JavaScript. The canvas element here is the container and you use JavaScript to draw the graphical elements. Canvas has a number of methods that allow you to draw frames, circles, text or images. Below I give you a few simple examples of how you can draw a number of simple elements with canvas.
Example 1
The first example is a simple line that we draw. First we grab the canvas element with document.getElementById with javascript and then assign a field to the canvas to draw on with the getContext method. Then you go with the moveTo() method to a certain point and with the lineTo() method you put a line at the coordinates you specify. Each lineTo() method creates an extra line. And at the end we use the stroke() method to actually draw the path.
Read more about Symfony or portals click below!
JS
// select the canvas element
var c = document.getElementById(“canvasSquare”);
// call the getContext method on the canvas variable so we can start drawing on it
var ctx = canvas.getContext(‘2d’);
// Create a path with which lines you want to make
ctx.moveTo(0,0);
ctx.lineTo(300,100);
ctx.lineTo(200,0);
ctx.lineTo(0,100);
ctx.lineTo(200,150);
ctx.lineTo(0,0);
// Draw the lines
ctx.stroke();
Example 2
We can extend this example so that we can draw on our canvas ourselves. The principle is pretty much the same we add a few event listeners the first is a mousedown event and then we use the moveTo() method to get to the coordinates. We also put up a flag that we are drawing. The following is an event listener that checks our mouse movement for the onmousemove event. Here we use the lineTo() method with the coordinates from the event to create the path and then the stroke() method to draw the path. We also use an if statement to see if we are still drawing. Finally, an onmouseup event to make sure we stop drawing.
JS
var el = document.getElementById(‘cDraw’);
var ctx = el.getContext(‘2d’);
var isDrawing;
el.onmousedown = function(e) {
isDrawing = true;
ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
if (isDrawing) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
};
el.onmouseup = function() {
isDrawing = false;
};
SVG
SVG stands for scalable vector graphics. SVGs are an XML-based markup language to represent 2-dimensional graphical elements. It is also said that SVG is for graphics as HTML is for text. SVG integrates easily with other W3C standards such as DOM. The beauty of SVG is that any element and attribute can be animated. Below I show a number of SVG examples.
First of all, we start with a circle. SVG code is quite simple and has a number of elements. You always start with an SVG element <svg> which can have width and height properties <svg width=”75″ height=”75″>. In this case we use the circle element to draw a circle. Then on this you have cx and cy attributes that represent the x and y coordinates of the center of the circle. The r attribute represents the radius of the circle. The stroke and stroke-width attribute control the border of the circle element. Finally the fill attribute and that represents the color in the circle. After this, close the </svg> element again and you’re done!</svg>
SVG
<svg height=”100″ width=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”red” />
</svg>
Did you know?
In our blog article about css we also use SVG to draw the bubbles
As you can see, both are good options for creating dynamic graphics. Where SVG is a language for describing 2d graphics in XML, canvas draws 2d graphics on the fly with javascript. SVG is based on XML so all SVG elements are available in the SVG DOM so you can also give them event handlers. In SVG every element is an object in canvas, as soon as it is drawn it is forgotten by the browser.
Below you can find the main differences between the 2.
Canvas
- Resolution dependent
- No support for event handlers
- Poor text rendering capabilities
- You can save the resulting image as .png or .jpg
- Well suited for graphic-intensive games
SVG
- Resolution independent
- Support for event handlers
- Best suited for applications with large rendering areas (Google Maps)
- Slow rendering if complex (anything that uses the DOM a lot will be slow)
- Not suited for game applications
So you have 2 fantastic front-end techniques that can be used in very different ways and are good in different aspects. We hope this article has given you some insight into SVG and Canvas animations. Soon we will also publish some more of our own online games based on canvas so stay tuned! Finally, a very nice example of how you can extend the above drawing example to something that connects all the points where you come close, so you can come to very nice drawings
Do you have a project in which you need Graphic Elements and you have no idea how to proceed, please contact our team quickly and we will see what we can do for each other.
