Elementary Canvas

  • Tutorial
If you are studying the web quite recently, but have already seen various beautiful effects on the site, like a particle system or any games developed on canvas, and you are intrigued, but it’s very scary to learn something new, then I’m ready to show you how in 50 lines of js code you can do something interesting on canvas.

image

I want to say right away, I want to explain the logic of working with canvas. The code is very simple, I hope this will push you to learn tools like canvas. And also it is a very good practice for a novice JS programmer.

Let's go to the code. We write a simple generation of squares of different colors on the canvas. You can see the whole code at once, then I will explain it.


What do we need to do?

  1. Get the canvas and its 2D context (If you haven’t done anything like this before, don’t worry, it makes 2 lines of code)
  2. Let's make our canvas a bit adaptive.
  3. Set the variables and properties we need
  4. Drawing an element on canvas
  5. When resizing, change the size of the canvas

Work in canvas can be divided into 3 stages.

  1. Setting the properties we need (pen thickness, fill color, line color, and other properties)
  2. Draw element
  3. If we do something dynamic. For example, a game, animation, particle system and other elements, then we create a cycle and in it we throw a render (drawing) of our objects.

Well, well, back to our code.

1. As I said, two lines of code and we can manipulate the canvas.

image

Get the element by Id is the standard browser API, but getContext is the method of the canvas itself. You can get a 3D context, but at the moment we do not need it.

2. The second point, the third and fifth, I will unite because there is a declaration of variables + the code is the same here. You can even make a separate function because code duplication is already underway, and this is bad.

image

We will need the width and height variables further. Also, don't forget to call the ReSize function after getting the canvas context.

We will need another options object. In it, we will store all the settings.

opacity - the speed with which our elements will be rubbed onto the canvas
count - the number of cubes that we will create in one pass of the
fps function - I think it’s not necessary to explain why ... the truth is strange ...
color - here lies a mask that represents our
hue color palette - this is a color tone in the range from 0 to 360. the picture will be clearer

image

division Speed ​​- this is the variable with the help of which we will be able to adjust the speed of color change

image

4. We just have to create a loop, a function for drawing and call it all.

image

We create the Init function, it is needed to initialize the loop. The window has an excellent requestAniimationFrame () method that allows you to loop the call to the function we need. Also inside Init, we call the Step () function in which the code for drawing our cubes is stored.

We will draw in a loop to draw 100 elements at once. Inside the cycle, the first thing we do is set a condition that allows us to choose a color tone in the range from 0 to 360, thereby the colors of our cubes will change. The next two lines can be combined into one, thereby directly setting the fill color of the shape. ctx.fillStyle allows you to set the fill color, and ctx.fillRect (point x, point y, width, height) allows you to draw a shape. We set random height with width, but in the range of our sizes.

Two lines after the cycle, this is to clear the screen. You already know that fillstyle allows you to set the fill color, we set the white color with opacity equal to the opacity of the options object. And also we start drawing of the clearing figure from a point 0: 0 with sizes equal to the size of our canvas.

We can only call the Init function anywhere in our program.

If you still doubt that you can do beautiful things with canvas, here’s one example.


If you are interested in canvas, then it's time to continue exploring this technology. I can not advise you a good article on the study because for me it was very boring to read about canvas and for myself I did not save anything good in the bookmarks. And on youtube there are very few good videos on canvas, and those that can be viewed contain only 10% of the necessary information and 30% of water, while the rest of the time they write code with errors and design it on the go. In my opinion, the best thing is to take some simple example and try to implement it yourself.

Also popular now: