DEV Community

Cover image for Canvas Javascript: a powerful solution for web’s graphic
Roberto
Roberto

Posted on

Canvas Javascript: a powerful solution for web’s graphic

<canvas> is an Html5 element for graphic totally managed by javascript. It is the right solution for 3d and 2d animations, for videogames and for the handling of your photos and videos.

It was born to replace the old Flash, a third parts’ technology which was very popular in the 2000’s thanks to its amazing animations never seen before. Flash anyway had some serious security problems, so they decided to replace it with a native html element.

This html element let us build a canvas on our browser so we can create a rectangular space (any size we want!) where we can create our digital masterpieces.

Canvas’ pros 🔺 and cons 🔻

Pros

  • Animations are faster and very fluid
  • We can control every single element thanks to javascript
  • Optimized memory’s management. That means an enormous save of memory!
  • Amazing calculation management. For example: videogames need technology which can manage all the inputs without slowing down, because every second (time depends on frame rate) it has to calculate movements, collisions, keyboard’s or mouse’s inputs on a variety of elements that are on canvas

Cons

  • It’s complex, which doesn’t mean difficult, but we have to study it and learn it.
  • If you have to animate few elements (maybe a click on the mouse or you just don’t need always to refresh) you don’t have to make it difficult with canvas: you can manage it with css.
  • It loses speed if we expand the number of elements to manage.

HTML

Due to canvas is totally managed by javascript, the html file will be a basic document with the tag. This one will have an id, that with a lot of creativity, we are going to call myCanvas.

<html>
   <head>
     <meta charset="UTF-8">
     <title>Platform game - single screen</title>
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>

   <body>
     <canvas id="myCanvas"></canvas>
   </body>

   <script src="main.js"></script>
 </html>
Enter fullscreen mode Exit fullscreen mode

Html document then will call:

  • main.js file, from where we can manage everything.
  • css file, which will add a little bit of style even if it is not fundamental.

CSS

In the css style we’ll fix the canvas at the centre of our display and we’ll add to it a black frame so it will be easier to see it.

body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
 }

canvas {
     border: 3px solid black;
 }
Enter fullscreen mode Exit fullscreen mode

JS

This is the most important and the most complex part so, in this post, we’ll just see how to initialize it.

let canvas = document.getElementById('myCanvas');
canvas.width = 600;
canvas.height = 400;

let ctx = canvas.getContext('2d');
Enter fullscreen mode Exit fullscreen mode

This is a script that initialize the canvas. We’ll use it very often, because this technology will be the start for some of our next projects.
We caught the canvas element thanks to document.querySelector("#myCanvas") thanks to its id #myCanvas and we saved it in the canvas variable.
We had assigned height and width to the canvas thanks to height and width proprieties. Standard sizes are 300px x 150px.
With the getContext method we choose the context to work in, in our case is the “2d” and thanks to this we have access to the functions which let us to draw and handle the bidimensional canvas.
If we had specified “webgl” instead of “2d”, now we would work on with “3d” method.

CONCLUSION

This is the result, for now it's a bit sad, but what we have learned today is just the tip of the iceberg, in future posts we will explore many features of this fantastic technology.

If you have any tips, suggestions or constructive critics leave me a comment below or contact me through my social network (linkedin, twitter).

Latest comments (0)