Canvas Javascript: a powerful solution for web’s graphic
Tags: canvas, javascript
Published: 2021-03-14 19:09:09

---
title: Canvas Javascript: a powerful solution for web’s graphic
published: true
description: what is a canvas javascript and how use it 
tags: canvas, js, Javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8e1lw5af8etjb3maxsg.jpg
---

`<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 **_<canvas>_ tag**. This one **will have an id**, that with a lot of creativity, we are going to call **_myCanvas_**.

```html
<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>
```

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.

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

canvas {
     border: 3px solid black;
 }
```

##JS

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

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

let ctx = canvas.getContext('2d');
```

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.

{% codepen https://codepen.io/camizzilla/pen/VwKWjQd %}

If you have any tips, suggestions or constructive critics leave me a comment below or contact me through my social network ([linkedin](https://www.linkedin.com/in/robertocazzaniga), [twitter](https://twitter.com/camizzilla)).